Bootstrap--JS插件模态对话框

小丑鱼0703

浏览: 502053 次
性别:
来自: 北京

最近访客更多访客>>

ekingdom

倚月紫凌

Janne

qq85609655

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Bootstrap

http://v2.bootcss.com/javascript.html#modals
方法
.modal(options)
让你指定的内容变成一个模态对话框。接受一个可选的参数object.

$('#myModal').modal({keyboard: false})

.modal('toggle')
手动打开或隐藏一个模态对话框。

$('#myModal').modal('toggle')

.modal('show')
手动打开一个模态对话框。

$('#myModal').modal('show')

.modal('hide')
手动隐藏一个模态对话框。

$('#myModal').modal('hide')

<!DOCTYPE html>  
<html lang="zh-CN">  
  <head>  
    <title>Bootstrap Model</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <!--<script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-modal.js"></script>-->
    <script>
      $(document).ready(function() {
        $('#windowTitleDialog').bind('show', function () {
          document.getElementById ("xlInput").value = document.title;
          });
        });
      function closeDialog () {
        $('#windowTitleDialog').modal('hide'); 
        };
      function okClicked () {
        document.title = document.getElementById ("xlInput").value;
        closeDialog ();
        };
      function openDialog(){
        $('#windowTitleDialog').modal('show');
      };
    </script> 
  </head>  
  <body>   
    <div id="windowTitleDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
        <div class="modal-header">
          <a href="#" class="close" data-dismiss="modal">&times;</a>
          <h3>请给窗口重新命名</h3>
        </div>
        <div class="modal-body">
          <div class="divDialogElements">
            <input class="xlarge" id="xlInput" name="xlInput" type="text" />
          </div>
        </div>
        <div class="modal-footer">
          <a href="#" class="btn" onclick="closeDialog ();">Cancel</a>
          <a href="#" class="btn btn-primary" onclick="okClicked ();">OK</a>
        </div>
    </div>
    <!--主控元素上设置data-toggle="modal"，再设置data-target="#foo" 或href="#foo" 用以指向某个将要被启动的对话框的id-->
    <div class="divButtons">
<!--a标签添加href="#windowTitleDialog"可以弹出弹窗，或者可以通过a标签cilck事件调用封装的openDialog()方法实现-->
      <a data-toggle="modal" href="#windowTitleDialog" class="btn btn-primary btn-large" onclick="openDialog()">设置窗口名称</a>
    </div>
  </body>  
</html>

效果如下：页面title由“Bootstrap Model”变成了“Bootstrap Model example”