bootstrap弹出窗口

最新推荐文章于 2024-07-10 19:56:48 发布

oiaa

最新推荐文章于 2024-07-10 19:56:48 发布

阅读量3.9k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41900808/article/details/84840845

版权

前端专栏收录该内容

122 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<style>

</style>

<body>

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">button</button>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header">
                <button class="close" data-dismiss="modal">X</button>
                <div class="modal-title">title</div>
            </div>

            <div class="modal-body">
                aaaaaaaaaaa
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal">yes</button>
                <button class="btn btn-primary" data-dismiss="modal">no</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>

modal-body：窗口主要内容区域。
modal-footer：窗口底部区域。（底部一般写确认和取消按钮）
在确认和取消按钮上绑定data-dismiss=“modal”来关闭模态框。

过渡效果： 
在默认情况下，模态框、弹出框、选项卡是有过渡效果的。 

模态框：弹出一个窗，这个窗是子窗体，子窗体覆盖了父窗体。 
通过data属性来调用。 
data-toggle=“modal”：用于打开modal窗口。 
data-target=“#idName”：打开的目标。 
模态窗口有两个基类： 
modal：把div元素识别成模态框。 
fade：当窗口切换，淡入淡出的效果。 

模态窗口需要以下几个类来支撑： 
modal-dialog：对话框。 
modal-content：内容。 
modal-header：模态框里的页头。 
modal-title：模态框标题。 
close：关闭按钮的样式。
data-dismiss="modal"：关闭模态框。
（虽然之前写了close的关闭图标，但是它是一个CSS样式，为关闭按钮设置样式。但是data-dismiss="modal"才是关闭按钮的行为。）

backdrop是用来定制模态窗口的外观和感观的选项，而不是方法。

oiaa

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
bootstrap弹出窗口

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录