bootstrap模态对话框(最简单)

根据公司的需求,需要一个对话框来返回给客户的失败原因,刚刚开在百度上搜了老半天,嫩是没有搜索一个自己想要的,后来发送私信给一个博友,经过他哪里找到了自己想要的答案,废话不多说直接看源码:

 1 <!DOCTYPE html>
 2 <html>
 3      <head>
 4         <title>Bootstrap 实例 - 模态框(Modal)插件</title>
 5         <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 6         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 7         <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 8      </head>
 9    <body>
10 
11       <h2>创建模态框(Modal)</h2>
12       <!-- 按钮触发模态框 -->
13       <button class="btn btn-primary btn-lg" data-toggle="modal" 
14               data-target="#myModal">
15            开始演示模态框
16       </button>
17 
18        <!-- 模态框(Modal) -->
19       <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
20               aria-labelledby="myModalLabel" aria-hidden="true">
21          <div class="modal-dialog">
22              <div class="modal-content">
23                   <div class="modal-header">
24                          <button type="button" class="close" 
25                                   data-dismiss="modal" aria-hidden="true">
26                              &times;
27                          </button>
28                         <h4 class="modal-title" id="myModalLabel">
29                          模态框(Modal)标题
30                         </h4>
31                  </div>
32                  <div class="modal-body">
33                      <input type="text"/>
34                            在这里添加一些文本
35                   </div>
36                   <div class="modal-footer">
37                       <button type="button" class="btn btn-default" 
38                           data-dismiss="modal">关闭
39                      </button>
40                      <button type="button" class="btn btn-primary">
41                            提交更改
42                      </button>
43                  </div>
44              </div><!-- /.modal-content -->
45       </div><!-- /.modal -->
46    </div>
47 </body>
48 </html>

或者http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html进这个网站

或者直接百度搜索:bootstrap的modal框

原文地址:https://www.cnblogs.com/cunkouzh/p/4963348.html