zoukankan html css js c++ java

HTML5开发之 -- 模态突出窗（bootstrap）

最近在学习web端开发相关，bootstrap非常好用！

有个模态弹出窗的效果，在此记录下：

1、导入：

<script src="libs/js/jquery-3.2.1.min.js"></script>
<script src="libs/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="libs/css/bootstrap.min.css">

2、具体代码实现：

<body>
    <button class="btn btn-primary" type="button">点击我</button>
    <div class="modal fade" id="myModel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">模态弹出窗标题</h4>
                </div>

                <div class="modal-body">
                    <p>模态弹出窗主题内容</p>
                </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>
        </div>
    </div>

    <script>
        $(function () {
            $(".btn").click(function () {
                $("#myModel").modal("toggle");
            });
        });
    </script>

</body>

效果如下：

查看全文

相关阅读:
常见的兼容问题
 清除浮动
 简单的容器盒子
 查找并替换中文字符
 遍历对象属性值
 统一服务器和界面的传输格式
 随机生成包含大小写和数字的字符串
 网站翻译功能
 菜鸟安装vue-devtool 工具
 安装虚拟机所遇到的问题

原文地址：https://www.cnblogs.com/hero11223/p/7462216.html