首页 > 代码库 > 第二百四十三节，Bootstrap模态框插件

第二百四十三节，Bootstrap模态框插件

2024-09-18 22:46:19   219人阅读

Bootstrap模态框插件

 

学习要点：

　　1.基本使用

　　2.用法说明

 

本节课我们主要学习一下 Bootstrap 中的模态框插件，这是一款交互式网站非常常见的 弹窗功能插件。

 

一．基本使用

使用模态框的弹窗组件需要三层 div 容器元素：

　　1分别为 modal(模态声明层)、

　　2dialog(窗口声明层)、

　　3content(内容层)。

在内容层里面，还有三层：

　　1分别为 header(头 部)、

　　2body(主体)、

　　3footer(注脚)。

modal样式class类，写在声明模态框<div>里，模态框区块声明(Bootstrap)
show样式class类，写在声明模态框<div>里，表示模态框显示,默认模态框是隐藏的(Bootstrap)
modal-dialog样式class类，写在声明模态框窗口<div>里，模态框窗口区域声明(Bootstrap)
modal-content样式class类，写在声明模态框内容<div>里，模态框内容区域声明(Bootstrap)
modal-header样式class类，写在模态框内容里头部<div>里，模态框内容头部区域样式(Bootstrap)
close样式class类，写在模态框头部<button>里，模态框内容头部区域关闭按钮样式(Bootstrap)
data-dismiss="modal"模态框事件点击后关闭模态框，写在模态框关闭按钮<button>里(Bootstrap)
modal-title样式class类，写在模态框头部<h1-h4>里，模态框内容头部区域标题样式(Bootstrap)
modal-body样式class类，写在模态框主体<div>里，设置模态框主体样式(Bootstrap)
modal-footer样式class类，写在模态框底部<div>里，设置模态框底部样式(Bootstrap)

<div class="modal show">                                                    <!--modal模态框区块声明，show表示模态框显示 -->
    <div class="modal-dialog">                                              <!--modal-dialog模态框窗口区域声明 -->
        <div class="modal-content">                                         <!--modal-content模态框内容区域声明 -->
            <div class="modal-header">                                      <!--modal-header模态框内容头部区域样式-->
                <button type="button" class="close" data-dismiss="modal">   <!--close模态框内容头部区域关闭按钮样式，data-dismiss="modal"事件点击后关闭模态框-->
                    <span>&times;</span>
                </button>
                <h4 class="modal-title">会员登录</h4>                        <!--modal-title模态框内容头部区域标题样式-->
            </div>
            <div class="modal-body">                                        <!--modal-body设置模态框主体样式-->
                <p>暂时无法登录会员</p>
            </div>
            <div class="modal-footer">                                      <!--modal-footer设置模态框底部样式 -->
                <button type="button" class="btn btn-default">
                    注册
                </button>
                <button type="button" class="btn btn-primary">
                    登录
                </button>
            </div>
        </div>
    </div>
</div>

技术分享

 

 

让模态框自动隐藏，然后通过点击按钮弹窗

data-toggle="modal"声明事件切换类型，modal表示模态框类型，写在<button>里(Bootstrap)
data-target="#myModal">声明事件操作对象，#myModal表示点击后关闭id为#myModal的元素，写在<button>里(Bootstrap)

<div class="modal" id="myModal">                                                <!--模态框去掉 show，增加一个 id-->
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</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">
                    注册
                </button>
                <button type="button" class="btn btn-primary">
                    登录
                </button>
            </div>
        </div>
    </div>
</div>

<!--data-toggle="modal"声明事件切换类型，modal表示模态框类型(Bootstrap)-->
<!--data-target="#myModal">声明事件操作对象，#myModal表示点击后关闭id为#myModal的元素(Bootstrap)-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    点击弹窗
</button>

 

第二百四十三节，Bootstrap模态框插件


联系
我们