【bootstrap】模态框

最新推荐文章于 2025-06-03 09:40:25 发布

MR. three

最新推荐文章于 2025-06-03 09:40:25 发布

阅读量262

点赞数

分类专栏：学习文章标签： bootstrap 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_45096185/article/details/122457194

版权

学习专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>模态框</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style></style>
</head>

<body>
<!--按钮-->
<a href="#mymodal" class="btn btn-primary" data-toggle="modal">点击按钮触发弹框</a>
<!--<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">点击按钮触发弹框2</button>-->


<!--弹出的模态框-->
<div id="mymodal" class="modal fade"><!-- modal固定布局，上下左右都是0表示充满全屏，支持移动设备上使用触摸方式进行滚动。。-->
    <div class="modal-dialog"><!-- modal-dialog默认相对定位，自适应宽度，大于768px时宽度600，居中-->
        <div class="modal-content"><!-- modal-content模态框的边框、边距、背景色、阴影效果。-->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">标题</h4>
            </div>
            <div class="media-body">
                <p>  内容</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>

</div>

<script src="js/jquery-1.12.4.js"></script>
<script src='js/bootstrap.js'></script>
<script>
    //        默认弹出（激活弹窗）
    $('.modal').modal();
</script>
</body>
</html>