模态窗

<!-- Modal -->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <!-- 标题 -->
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            <!-- 内容 -->
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
                <button class="btn btn-primary" type="button">Save changes</button>
            </div>
        </div>
    </div>
</div>

打开方法：

• HTML： 为元素添加 data-toggle="modal" 属性，设置data-target = 模态窗 id

  <button type="button" class="btn btn-primary btn" data-toggle="modal" data-target="#myModal">HTML打开</button>
  

• js

  $('#myModal').modal('show'); //打开
  $('#myModal').modal('hide'); //关闭
  

Js 动态设置模态窗

模态窗可以根据需要由 js 动态生成，如下，当点击id为loadmodal的按钮时，构建模态窗的 html 代码，将其插入页面，然后显示：

$('#loadmodal').click(function(){
    var html = '<div class="modal fade" id="loadModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>'+
                        '<h4 class="modal-title" id="myModalLabel">Modal title</h4>'+
                      '</div>'+
                      '<div class="modal-body">'+
                        '...'+
                      '</div>'+
                      '<div class="modal-footer">'+
                        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+
                       ' <button type="button" class="btn btn-primary">Save changes</button>'+
                      '</div>'+
                   ' </div>'+
                  '</div>'+
                '</div>';
    //第一次点击插入模态窗，后续点击不再插入，只显示
    if( $('#loadModal').length >=1 ){
        $('#loadModal').modal();
    }else{
        $('body').append(html);
        $('#loadModal').modal();
    }
});