Bootstrap模态对话框用法简单示例

2019-11-19 13:05:03

字体：大中小

来源：转载

供稿：网友

本文实例讲述了Bootstrap模态对话框用法。分享给大家供大家参考，具体如下：

环境：bootstrap-3.3.5,jquery-3.0.0

代码：

<!DOCTYPE html><html>  <head>  <title>www.VeVB.COm bootstrap模态对话框</title>    <meta http-equiv="Content-type" content="text/html; charset=utf-8">    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="external nofollow" />    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="external nofollow" />    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js" ></script>    <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>  </head>  <body><h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 --><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-header">      <button type="button" class="close"        data-dismiss="modal" aria-hidden="true">         ×      </button>      <h4 class="modal-title" id="myModalLabel">        模态框（Modal）标题      </h4>     </div>     <div class="modal-body">      在这里添加一些文本     </div>     <div class="modal-footer">      <button type="button" class="btn btn-default"        data-dismiss="modal">关闭      </button>      <button type="button" class="btn btn-primary">        提交更改      </button>     </div>   </div><!-- /.modal-content --></div><!-- /.modal --></div>  </body></html>

小编已经将代码中所引用的bootstrap相关css、js文件全部换成了cdn形式，方便测试。

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.VeVB.COm/code/HtmlJsRun测试，可得到如下显示效果：