bootstrap 模态框的动态复用

bootstrap 模态框的动态复用 

在bootstrap文档中，模态框是由 data-toggle="modal"  data-target="#myModal" 这两个属性的div，通过点击此div触发的，很多时候都会用到的模态框，这时候直接复用就方便多了

基础用法，移步：Bootstrap 模态框（Modal）插件

1、先看模态框HTML代码

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title" id="myModalLabel">操作</h3>
            </div>
            <div class="modal-body" style="overflow-y: visible; margin-bottom: 0px;">请选择您要进行的操作？</div>
            <div class="modal-footer" style="margin-top: 0px; display: block;">
                <a class="btn btn-default" id="myModelLogin" href="" target="_blank">登录到<span id="myModelSystem"></span>系统</a>
                <a class="btn btn-default" href="org/admin">去录单</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

2、通过绑定的class来手动触发，因为动态生成的div元素有很多，类选择器很合适，当然使用这种触发方式，data-toggle="modal"  data-target="#myModal" 就用不到了

<td>
    {foreach $item['jobs'] as $value}
    <div class="pull-left t2 clickmodel" data-system="{$item.name}" data-login="{$value.login_url}?username={$value.job_no}">
        <small class="badge loginLi sp_color_9850" style="display: inline-block;">
            <span>{$value.job_no}</span>
        </small>
    </div>
    {/foreach}
</td>

此处是通过data-system和data-login自定义的两个属性，在下面能用到

3、下面是触发模块框，并实现动态绑定属性

var system_name = '';
var login_url = '';

$('.clickmodel').bind('click',function () {
    system_name = $(this).data('system');
    login_url = $(this).data('login');
    $('#myModal').modal("show"); // 触发模态框
});

// 在调用 show 方法后触发。
$("#myModal").on("show.bs.modal", function () {
    $('#myModelSystem').text(system_name);
    $('#myModelLogin').attr('href',login_url);
});

注意的是，system_name和login_url必须是全局变量，不然在show.bs.model中会取不到

最后是效果，点击任意一个工号，都会出现模态框

补充：

1、如何判断某模态框是否显示

　　当模态框显示出来的时候，在body元素会增加一个class：modal-open，所以可以通过判断body元素是否有这个class即可

　　$('body').hasClass('modal-open');

关联文章：bootstrap共享模态框，jQuery获取模态框触发元素