Bootstrap 教程
Bootstrap 教程
阅读(8.4k) 书签 赞(1) 我要纠错

Bootstrap 对话框

2018-03-03 16:35 更新

Modals（模态框）就像对话框。

它用于

  • 显示对话框提示
  • 显示警告
  • 显示确认对话框
  • 显示较大版本的图像
  • 显示一长串条款和条件
  • 显示注册/登录表单

使用Bootstrap 3，模态框已经可以响应，这意味着它们看起来不错，即使在较小的屏幕上也能正常运行。

每个模态框都应该有一个带有类 modal的容器。

为了给模态框添加淡入淡出效果，我们需要将类 fade 添加到同一个容器中。

接下来，我们定义一个具有类 modal-dialog的div元素。这是负责控制模态框的大小。

在模态对话框中，我们将创建一个封装模态框各个子部分的wrapper元素。

这个wrapper元素应该有一个类叫 modal-content。

模态框的子部分是header，body和footer。

header和footer部分是可选的。要创建模态框的header，你需要一个 div 元素与类 modal-header。

在里面你可以放一个模态框标题和模态框关闭图标。

模态框标题使用modal-title类的h4元素给出。

这里的dismiss图标是一个乘法（x）符号，它围绕一个按钮元素。此按钮应该使用类 close，使它与模态框标题的左上角对齐。

添加一个 data-dismiss属性可以使按钮在单击时关闭模态框。

对于body，我们需要一个modal-body类的div。

为了创建模态框footer，我们定义一个具有类 modal-footer的div元素。

默认情况下，模态框footer中的内容是右对齐的。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
  <body style="margin:30px">
     <!-- Modal Handle -->
     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     Launch modal
     </button>

      <!-- Modal Markup kept out of all the div elements -->
      <div class="modal fade" id="myModal">
          <div class="modal-dialog">
              <div class="modal-content">
                  <!-- Modal Header -->
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Welcome Back!</h4>
                  </div>
                  <!-- Modal Body -->
                  <div class="modal-body">
                      <h1>Hello Readers!</h1>
                  </div>
                  <!-- Modal Footer -->
                  <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>
  </body>
</html>

对话框大小

模态框有三种宽度：大，默认和小。

如果没有向 modal-dialog 提供额外的类，它将以默认宽度600p显示。

要使模态框变大或变小，你需要将这些类中的一个添加到模态对话框元素：

  • modal-lg：宽度为900px的大模态框
  • modal-sm：宽度为300px的小模态框
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Large modal -->
  <button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Large modal</button>
 
    <div id="largeModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
            <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">Large Modal</h4>
                </div>
                <div class="modal-body">
                    <p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>
     
    <!-- Small modal -->
    <button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Small modal</button>
     
    <div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <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">Small Modal</h4>
                </div>
                <div class="modal-body">
                    <p>Add the <code>.modal-sm</code> class on <code>.modal-dialog</code> to create this small modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

使用Javascript显示对话框

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#myModal").modal("show");
  });
</script>
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don"t save, your changes will be lost.</small></p>
            </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>
</body>
</html>

更改触发器按钮上的模态框内容

以下示例显示如何更改根据触发按钮的data-title属性值更改模态框窗口的标题。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myModal").on("show.bs.modal", function(event){
        var button = $(event.relatedTarget);  // Button that triggered the modal
        var titleData = button.data("title"); // Extract value from data-* attributes
        $(this).find(".modal-title").text(titleData + " Form");
    });
});
</script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <button type="button" class="btn btn-primary" 
    data-toggle="modal" data-target="#myModal" data-title="Feedback">Feedback</button>
    <button type="button" class="btn btn-primary" 
    data-toggle="modal" data-target="#myModal" data-title="Report Error">Report Error</button>
    <button type="button" class="btn btn-primary" 
    data-toggle="modal" data-target="#myModal" data-title="Contact Us">Contact Us</button>
    
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Modal Window</h4>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Email:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">Message:</label>
                            &lt;textarea class="form-control" id="message-text"&gt;&lt;/textarea&gt;
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>     
</body>
</html>

选项

有一些选项可以传递到modal()方法来自定义模态框窗口。

名称 类型 默认值 描述
backdrop 布尔值或字符串"static" true 包含一个modal-backdrop 元素。或者，你可以为背景指定static ，在点击时不关闭模态框。
keyboard boolean（布尔值） true 按退出键关闭模态框窗口。
show boolean（布尔值） true 显示初始化或激活时的模态框。

.modal(options)

此方法将你的内容作为模态框激活。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".launch-modal").click(function(){
    $("#myModal").modal({
      keyboard: true
    });
  });
});
</script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary launch-modal" value="Launch Demo Modal">
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>Test.</small></p>
                    <p class="text-info"><small><strong>Note:</strong> 
                    Press Tab key on the keyboard to enter inside the 
                    modal window after that press the Esc key.</small></p>
                </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>
</div>
</body>
</html>

.modal('toggle')

此方法手动切换模态框窗口。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".toggle-modal").click(function(){
    $("#myModal").modal("toggle");
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.toggle-modal {
  width: 200px;
  position: absolute;
  margin: 0 auto;
  z-index: 9999;
  bottom: 20px;
  right: 0;
  left: 0;
}
</style>
</head>
<body>
<div class="bs-example">
  <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary toggle-modal" value="Toggle Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
      <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">Confirmation</h4>
          </div>
          <div class="modal-body">
            <p>This is a test?</p>
            <p class="text-warning"><small>This is atest.</small></p>
          </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>
</div>
</body>
</html>

.modal('show')

此方法可用于手动打开模态框窗口。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".open-modal").click(function(){
    $("#myModal").modal("show");
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.open-modal{
  width: 200px;
  position: absolute;
  margin: 0 auto;
  top: 20px;
  right: 0;
  left: 0;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary open-modal" value="Show Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>This is a test.</small></p>
                </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>
</div>
</body>
</html>

.modal('hide')

此方法可用于手动隐藏模态框窗口。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myModal").modal("show");
  $(".hide-modal").click(function(){
    $("#myModal").modal("hide");
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.hide-modal {
    width: 200px;
  position: absolute;
  margin: 0 auto;
  right: 0;
  left: 0;
    bottom: 20px;
  z-index: 9999;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary hide-modal" value="Hide Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>This is a test.</small></p>
                </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>
</div>
</body>
</html>

事件

Bootstrap的modal类包括很少的用于挂钩到模态框功能的事件。

事件 描述
show.bs.modal 在调用show instance方法时触发。
shown.bs.modal 当模态框对用户可见时触发。它将等待，直到CSS转换过程完全完成。
hide.bs.modal 当hide instance方法被调用时触发。
hidden.bs.modal 当模态框已完成对用户的隐藏时，会触发此事件。    它将等待，直到CSS转换过程完全完成。

以下示例在模态框窗口的淡出转换已经完全完成时显示日志消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".open-modal").click(function(){
    $("#myModal").modal("show");
  });
    $("#myModal").on("hidden.bs.modal", function(){
    console.log("Modal window has been completely closed.");
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.open-modal{
  position: absolute;
  margin: 0 auto;
  top: 20px;
  right: 0;
  left: 0;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary open-modal" value="Show Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>This is a test.</small></p>
                </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>
</div>
</body>
</html>
以上内容是否对您有帮助：
← Bootstrap 折叠
Bootstrap Div布局 →

推荐文章

推荐教程

推荐课程

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号