标签：控制 text jquery ade 理解 情况 -- 关闭 htm
bootstrap中有一个“模态框”插件，我理解的意思就是一个具有全局遮罩的弹窗提示，官方解释是：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
例子1：用按钮作触发
代码如下：
<button class="btn btn-primary btn-lg" 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-body"> 在这里添加一些文本 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">确认 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal -->
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置data-target="#myModel" 或 href="#myModel" 来指定要切换的特定的模态框（带有 id="myModel"）。
就是模态框的id要与控制器元素的id一致，可以自己定义，其他需要的效果及布局什么的就各取所需吧。
例子2：为模态框添加是否显示的条件（比如提示用户输入内容正确与否，是否确认某操作等）
代码如下：
<button class="btn btn-primary btn-lg" 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-body"> 在这里添加一些文本 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">确认 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> <!--引用jquery--> <script type="text/javascript"> if(condition){ $("#myModal").modal("show"); }else{ $("#myModal").modal("hide"); }
</script>
标签：控制 text jquery ade 理解 情况 -- 关闭 htm
原文地址：http://www.cnblogs.com/1rookie/p/6392178.html
