Bootstrap 实例 - 模态框(Modal)插件

发布时间:2017-1-19 4:13:34 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"Bootstrap 实例 - 模态框(Modal)插件 ",主要涉及到Bootstrap 实例 - 模态框(Modal)插件 方面的内容,对于Bootstrap 实例 - 模态框(Modal)插件 感兴趣的同学可以参考一下。

<!DOCTYPE html><html><head>    <meta charset="utf-8">     <title>Bootstrap 实例 - 模态框(Modal)插件</title>    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/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">                    &times;                </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>
或者脚本控制<script>    $('#myModal').modal('toggle');</scirpt>

原文:http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-modal

上一篇:转:MVC 数据验证
下一篇:华陆工程——业务流程管理方案

相关文章

相关评论