Bootstrap--JS插件模态对话框

最新推荐文章于 2024-09-30 14:28:41 发布

xiaochouyu0703

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量167

点赞数

分类专栏： Bootstrap 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xiaochouyu0703/article/details/84706233

版权

Bootstrap 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[url]http://v2.bootcss.com/javascript.html#modals[/url]
[b]方法[/b]
.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">×</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”
[img]http://dl2.iteye.com/upload/attachment/0106/6474/85c1789d-2207-3cb6-9b48-6844a9d388b7.png[/img]