bootstrap modal调用codemirror探索实践
来源:互联网 发布:计算机三级软件测试 编辑:程序博客网 时间:2024/05/24 06:57
datatables中的button触发modal事件
datatables中的button
<td><button type="button" data-toggle="modal" data-target="#editor" data-whatever={{ script.name }} class="btn btn-info" style="margin-right: 5px;">查看</button><button type="button" class="btn btn-warning" style="margin-right: 5px;">编辑</button><button type="button" class="btn btn-danger">删除</button></td>
{{ script.name }}是django的queryset
data-whatever绑定数据库数据通过modal的relatedTarget获取绑定数据
modal
<div class="modal fade" id="editor" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">查看脚本</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="scriptname" class="col-sm-2 control-label">脚本名称:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="scriptname" placeholder="unknown" readonly> <textarea id="cm" name="cm">test 4 chenqian.</textarea> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->
<script type="text/javascript"> $(document).ready(function(){ $('.btn-info').click(function () { $('#editor').on('shown', function(){ alert("opened"); var textarea = document.getElementById('cm'); setTimeout(function(){ var editor = CodeMirror.fromTextArea(textarea, { mode: 'text/css', lineNumbers: true, lineWrapping: true }); }, 500); alert("code init"); }).on('hidden', function(){ editor.refresh(); }); }); });</script>
此时可以正常弹出modal窗口,但是alert/console.log并无任何反应。
阅读全文
0 0
- bootstrap modal调用codemirror探索实践
- 在modal中调用codemirror
- Bootstrap modal
- Bootstrap-Modal
- BootStrap Modal
- bootstrap modal
- modal (Bootstrap)
- 基于bootstrap modal进行添加 修改,调用赋值
- 【bootstrap】 bootstrap-modal: 点击遮罩层不关闭modal
- bootstrap modal弹出框
- Bootstrap迁移系列 - Modal
- bootstrap modal使用方法
- BootStrap Modal Create
- bootstrap modal 一闪
- bootstrap modal 居中
- bootstrap static modal
- bootstrap modal 弹窗
- bootstrap modal垂直居中
- RabbitMQ 消息轮询和消息确认机制
- java获取本地IP和服务器IP
- mysql增删改查 常用脚本
- 常见数据结构的查找、插入、删除时间复杂度
- Error:Execution failed for task ':app:transformClassesWithJarMergingForDebug'
- bootstrap modal调用codemirror探索实践
- PaxCompiler脚本编译的一些要注意的问题
- localStorage记住用户密码
- Android ProgressBar的样式
- 不容易系列之二
- Ubuntu序列化重命名图片
- POJ 3253:Fence Repair
- 机器学习习题(9)
- 网络安全求职指南