用法

通过data属性: 在控制器元素(比如按钮或者链接) 上设置属性data-toggle="modal" ,同时设置data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有id="identifier")

<body>
    <!--第一种方法-->
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>

    <!-- 模态框（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>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                在这里添加一些文本
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</body>

通过JavaScript: 使用这种技术, 可以通过JavaScript来调用带有id="identifier"的模态框
打开模态框 $('#identifier').modal('show')
隐藏模态框 $('#identifier').modal('hide')

<!--第二种方法 js-->
    <button class="btn btn-primary" id="btn">打开模态框2</button>

<script type="text/javascript">
        $('#btn').click(function(){
            //手动打开模态框
            $("#myModal").modal("show")

        })

    </script>

Bootstrap 插件-模态框