bootstrap中如何多次使用一个摸态框

/**弹出框设置**/
   function showjcziimodal(url, width) {
       $("#jczii-modal").remove();//如果存在此Id的Modal先remove
       var modal = $(‘<div id="jczii-modal" class="modal fade .jczii-modal" tabindex="-1" role="dialog">                               <div class="modal-dialog" role="document" style="width:‘ + width + ‘">                                   <div class="modal-content">                                   </div>                               </div>                       </div>‘).modal();
       $(‘body‘).append(modal);
       modal.find(‘.modal-content‘)
           .load(url, function (responseText, textStatus) {
               if (textStatus === ‘success‘ ||
                    textStatus === ‘notmodified‘) {
                   modal.show();
               }
           });
   }

    //页面所有Modal弹出
    $(function () {
        $(‘*[rel="jczii-modal"]‘).on(‘click‘, function (e) {
            var modal_width = !!$(this).attr(‘data-width‘) ? $(this).attr(‘data-width‘) : ‘‘;
            showjcziimodal($(this).attr(‘data-href‘), modal_width);
            e.preventDefault();
        });
    })

  

时间: 2024-08-19 08:08:41

bootstrap中如何多次使用一个摸态框的相关文章

Angularjs总结(三)摸态框的使用

静态页面: <input class="btn btnStyle " value="提 取" type="button" ng-click="TQZJDFG() " /> controllers中的方法: 1 $scope.TQZJDFG = function () { 2 //可以将此参数传递到所弹出的摸态框的控制器中 3 var data = { 4 'name': 1, 5 'age': 20 6 } 7 v

alert,摸态框的重新编写

以前写的摸态框,现在用来覆盖 alert ; 兼容的问题还未测试,后续会进行修改 -(function(window){ var Modal = function(){},modal var version = 1.0; Modal.prototype = { init:function(str){ this.createEntity(str); }, createEntity:function(str){ var bg = document.createElement('div'); bg.i

bootstrap去除默认的点击留白处摸态框消失

两种形式: 一.JS调用时: $('#myModal').modal({backdrop: 'static', keyboard: false}); 二.直接写在modal的结构上: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"data-backdrop=&

Bootstrap中的段落和强调内容

段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能). 3.颜色为深灰色(#333): 4.字体为"Helvetica Neue", Helvetica, Arial, sans-serif;(fon

Bootstrap中的less基础

在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有两个框,左侧输入less,右侧呈现编译的 css,方便在线学习和测试. 修改 bootstrap 中的 less 如下图,入口文件是 bootstrap.less 和 responsive.less 文件—— 这个入口文件 bootstrap.less 是这样引用其他 less 文件的: 了解这份

bootstrap中固定table的表头

前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄 由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 可是因为数据的列比較多.所以横向显示不下,为了较好的显示,将table包裹在了一个.table-responsive元素里 那么在较小的视口(viewport)时,则能够通过滑动来查看整条数据,从而能保证总体页面的协调性. 刚才说了,数据列比較多,且第一列是后面数据的全部者,那么观察者在看数据的时候肯定是要相应着数据全部者来看的.那么问题来了 若是滑动到

Bootstrap中六种表格样式

表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格.在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用. 同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本: ?  LESS版本,对应的文件是 tables.less ?  Sass版本,对应的文件是 _tables.scss 如果你不懂LESS

Bootstrap 中的 Typeahead 组件 -- AutoComplete

Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单的使用方式,就是直接在标记中声明,通过 data-provide="typeahead" 来声明这是一个 typeahead 组件,通过 data-source= 来提供数据.当然了,你还必须提供 bootstrap-typeahead.js 脚本. <html> <he

bootstrap中使用日历控件

在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一个demo: 关于资料中的依赖,截图如下: 关于把Less编译成css,需要安装node, 需要注意的是要定位到build文件夹,然后执行 lessc build_standalone.less  datetimepicker.css 大概意思就是把build_standalone.less转换成c