模拟BootStrap的弹框功能

最新推荐文章于 2023-10-27 15:54:40 发布
最新推荐文章于 2023-10-27 15:54:40 发布
阅读量999 收藏
点赞数
分类专栏： 小插件-原生JS 文章标签： JavaScript 原生js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_LamHo/article/details/51318498
版权

模拟BootStrap的弹框功能

今天项目中遇到了一个需要，需要用到BootStrap的弹框功能，但因为考虑到日后可能需要改用AngularJS去进行开发，大家都知道AngularJS和BootStrap的js文件是有冲突，因为BootStrap的js文件是依赖与jQuery的，如果用AngularJS去开发，意味着需要连BootStrap都不能用，但可以用UI-BootStrap，但因为不太熟悉UI-BootStrap，不知道有没有封装到该功能，所以就打算自己写一个类似BootStrap的弹框的，顺便当锻炼以下自己，也未以后的模块化开发做做准备。废话不多说，进入主题。

首先是需要到两个文件，分别是一个js文件和css文件。

<link rel="stylesheet" href="../afa_pop/afa_pop.css">
<script src="../afa_pop/afa_pop.js"></script>

因为我也的插件不依赖任何第三方插件，是原生去写的，所以应该兼容性会比较好吧。

然后调用方式：

<div class="list">
        <div>
            <p>我是弹框left</p>
            <span class="btn" id="a" data-afaPOP_target="a1" data-afaPOP_direction="left">点击我</span>
            <div id="a1" data-popDiv>
                <input type="text">
                <button>确定</button>
            </div>
        </div>
        <div>
            <p>我是弹框right</p>
            <span class="btn" data-afaPOP_target="a2" data-afaPOP_direction="right">点击我</span>
            <div id="a2" data-popDiv>
                <select>
                    <option value="0">请选择</option>
                    <option value="1">A</option>
                    <option value="2">B</option>
                    <option value="3">C</option>
                </select>
            </div>
        </div>
        <div>
            <p>我是弹框top</p>
            <span class="btn" data-afaPOP_target="a3" data-afaPOP_direction="top">点击我</span>
            <div id="a3" data-popDiv>
                <p>JavaScript是世界上最好的语言</p>
            </div>
        </div>
        <div>
            <p>我是弹框bottom</p>
            <span class="btn" data-afaPOP_target="a4" data-afaPOP_direction="bottom">点击我</span>
            <div id="a4" data-popDiv>
                <ul>
                    <li>asd</li>
                    <li>asd</li>
                    <li>asd</li>
                    <li>asd</li>
                </ul>
            </div>
        </div>
    </div>

这里简单介绍一下对应的一些属性：

  • data-afaPOP_target - 指向弹框的id。
  • data-afaPOP_direction - 表示弹框的方向。
  • data-popDiv - 写在弹框对应的标签中，主要是给样式的。
  • data-afaClosePOP - 绑定点击后隐藏弹框的事件

暂时就这些属性去进行定义和绑定事件，因为项目中还没有发现需要补充的功能，所以暂时就这样了，当然以后有时间还是继续优化的。

其中还有一些BUG还没有时间去修改，但不影响使用…

现在把代码补全：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../afa_pop/afa_pop.css">
    <style>
        .list{
            height:800px;
            width: 50%;
            overflow-y:auto;
            border:1px solid #e1e1e1;
            text-align: center;
            margin:0 auto;
        }
        .list>div{
            border-bottom:1px solid #000;
            padding:5px;
        }

    </style>
</head>
<body>
    <div class="list">
        <div>
            <p>我是弹框left</p>
            <span class="btn" id="a" data-afaPOP_target="a1" data-afaPOP_direction="left">点击我</span>
            <div id="a1" data-popDiv>
                <input type="text">
                <button>确定</button>
            </div>
        </div>
        <div>
            <p>我是弹框right</p>
            <span class="btn" data-afaPOP_target="a2" data-afaPOP_direction="right">点击我</span>
            <div id="a2" data-popDiv>
                <select>
                    <option value="0">请选择</option>
                    <option value="1">A</option>
                    <option value="2">B</option>
                    <option value="3">C</option>
                </select>
            </div>
        </div>
        <div>
            <p>我是弹框top</p>
            <span class="btn" data-afaPOP_target="a3" data-afaPOP_direction="top">点击我</span>
            <div id="a3" data-popDiv>
                <p>JavaScript是世界上最好的语言</p>
            </div>
        </div>
        <div>
            <p>我是弹框bottom</p>
            <span class="btn" data-afaPOP_target="a4" data-afaPOP_direction="bottom">点击我</span>
            <div id="a4" data-popDiv>
                <ul>
                    <li>asd</li>
                    <li>asd</li>
                    <li>asd</li>
                    <li>asd</li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script src="../afa_pop/afa_pop.js"></script>
</html>

css



*[data-popDiv]{visibility:hidden;background-color:#fff;border:2px solid #000;border-radius: 5px;position:absolute;z-index: 9999;padding: 12px;}
*[data-popDiv] .horn{display: block;position: absolute;width: 15px;height: 15px;z-index: 9999;background-color: #fff;-webkit-transform: rotate(-45deg);}
*[data-popDiv] .horn_left{border-bottom: 2px solid #000;border-right: 2px solid #000;}
*[data-popDiv] .horn_right{border-top: 2px solid #000;border-left: 2px solid #000;}
*[data-popDiv] .horn_top{border-top: 2px solid #000;border-right: 2px solid #000;}
*[data-popDiv] .horn_bottom{border-bottom: 2px solid #000;border-left: 2px solid #000;}
*[data-hasShowPOP = 'true']{visibility:visible;animation: afa_showPOP 0.5s;-moz-animation: afa_showPOP 0.5s;-webkit-animation: afa_showPOP 0.5s;-o-animation: afa_showPOP 0.5s;}
*[data-hasShowPOP = 'false']{visibility:hidden;animation: afa_hidePOP 0.5s;-moz-animation: afa_hidePOP 0.5s;-webkit-animation: afa_hidePOP 0.5s;-o-animation: afa_hidePOP 0.5s;}
#afa_pop_mask{top: 0;left: 0;position:fixed;width: 100%;height: 100%;z-index: 999;}
/*显示*/
@keyframes afa_showPOP
  {
      from {
          filter:alpha(opacity=0);
          -moz-opacity:0;
          opacity:0;
      }
      to {
          filter:alpha(opacity=100);
          -moz-opacity:1;
          opacity:1;
      }
  }

@-moz-keyframes afa_showPOP /* Firefox */
{
    from {
        filter:alpha(opacity=0);
        -moz-opacity:0;
        opacity:0;
    }
    to {
        filter:alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
    }
}

@-webkit-keyframes afa_showPOP /* Safari 和 Chrome */
{
    from {
        filter:alpha(opacity=0);
        -moz-opacity:0;
        opacity:0;
    }
    to {
        filter:alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
    }
}

@-o-keyframes afa_showPOP /* Opera */
{
    from {
        filter:alpha(opacity=0);
        -moz-opacity:0;
        opacity:0;
    }
    to {
        filter:alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
    }
}

/*隐藏*/
@keyframes afa_hidePOP
{
    from {
        filter:alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
    }
    to {
        filter:alpha(opacity=0);
        -moz-opacity:0;
        opacity:0;
    }
}

@-moz-keyframes afa_hidePOP /* Firefox */
{
    from {
        filter:alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
    }
    to {
        filter:alpha(opacity=0);
        -moz-opacity:0;
        opacity:0;
    }
}

@-webkit-keyframes afa_hidePOP /* Safari 和 Chrome */
{
    from {
        filter:alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
    }
    to {
        filter:alpha(opacity=0);
        -moz-opacity:0;
        opacity:0;
    }
}

@-o-keyframes afa_hidePOP /* Opera */
{
    from {
        filter:alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
    }
    to {
        filter:alpha(opacity=0);
        -moz-opacity:0;
        opacity:0;
    }
}

js

/**
 * Created by Administrator on 2016/5/3.
 */

window.onload = function(){

    //尖角的宽高，如果改变尖角宽高需要css和js同时去更改
    var hornHeight = 19,
        hornWidth = 19,
        scrollTop = 0,
        scrollLeft = 0;

    //初始化
    function init(){
        var afaPOPs = document.querySelectorAll('[data-afaPOP_target]');
        var afaClose = document.querySelectorAll('[data-afaClosePOP]');
        //循环设定位置及绑定显示隐藏事件
        for(var i = 0;i < afaPOPs.length;i++){
            var curr = afaPOPs[i],
                targetId = curr.dataset.afapop_target,
                direction = curr.dataset.afapop_direction;

            //设置尖角的位置和弹框的定位
            switch (direction){
                case 'left' : setPOPDirection.left(document.getElementById(targetId));
                    setPosition.left(curr,document.getElementById(targetId));
                    break;
                case 'right' : setPOPDirection.right(document.getElementById(targetId));
                    setPosition.right(curr,document.getElementById(targetId));
                    break;
                case 'top' : setPOPDirection.top(document.getElementById(targetId));
                    setPosition.top(curr,document.getElementById(targetId));
                    break;
                case 'bottom' : setPOPDirection.bottom(document.getElementById(targetId));
                    setPosition.bottom(curr,document.getElementById(targetId));
                    break;
            }

            //绑定事件
            !function(targetId,curr,direction){
                curr.addEventListener('click',function(){
                    //隐藏弹框
                    if(document.getElementById(targetId).getAttribute('data-hasShowPOP') == 'true'){
                        var mask = document.getElementById('afa_pop_mask');
                        if(mask){
                            document.body.removeChild(mask);
                        }
                        document.getElementById(targetId).setAttribute('data-hasShowPOP','false');
                        //显示弹框
                    }else{
                        //先隐藏所有弹框
                        closeAllPOP(function(){
                            //设置尖角的位置和弹框的定位
                            switch (direction){
                                case 'left' : setPosition.left(curr,document.getElementById(targetId));
                                    break;
                                case 'right' : setPosition.right(curr,document.getElementById(targetId));
                                    break;
                                case 'top' : setPosition.top(curr,document.getElementById(targetId));
                                    break;
                                case 'bottom' : setPosition.bottom(curr,document.getElementById(targetId));
                                    break;
                            }
                            //先创建一个mask
                            var mask = document.createElement('div');
                            mask.id = 'afa_pop_mask';
                            document.body.appendChild(mask);
                            //点击mask隐藏元素，模拟点击body
                            document.getElementById('afa_pop_mask').addEventListener('click',function(){
                                //隐藏完后删除mask
                                closeAllPOP(function(){
                                    document.body.removeChild(mask);
                                });
                            });
                            //显示对应弹框
                            document.getElementById(targetId).setAttribute('data-hasShowPOP','true');
                        });
                    }

                });
            }(targetId,curr,direction);

        }
        //循环绑定隐藏事件
        for(var n = 0;n < afaClose.length;n++){
            closePOP(afaClose[n]);
        }

    }

    //关闭所有弹框
    function closeAllPOP(callback){
        var popDivs = document.querySelectorAll('[data-popDiv]');
        for(var n =0;n <popDivs.length;n++){
            popDivs[n].setAttribute('data-hasShowPOP','false');
        }
        if(callback){
            callback();
        }
    }

    //关闭弹框事件
    function closePOP(curr){
        var id = curr.dataset.afaclosepop;
        curr.addEventListener('click',function(){
            document.getElementById(id).setAttribute('data-hasShowPOP','false');
        })
    }

    //设置尖角的位置和方向
    var setPOPDirection = {

        left : function(elem){
            var popHeight = elem.offsetHeight,
                popWidth = elem.offsetWidth,
                horn = document.createElement('span');
            horn.className = 'horn horn_left';
            elem.appendChild(horn);
            horn.style.top = (popHeight/2 - hornHeight/2) + 'px';
            horn.style.left = (popWidth - hornWidth/2)-1 + 'px';
        },
        right : function(elem){
            var popHeight = elem.offsetHeight,
                horn = document.createElement('span');
            horn.className = 'horn horn_right';
            elem.appendChild(horn);
            horn.style.top = (popHeight/2 - hornHeight/2) + 'px';
            horn.style.left = (0 - hornWidth/2) + 'px';
        },
        bottom : function(elem){
            var popWidth = elem.offsetWidth,
                horn = document.createElement('span');
            horn.className = 'horn horn_top';
            elem.appendChild(horn);
            horn.style.top = (0 - hornWidth/2) + 'px';
            horn.style.left = (popWidth/2 - hornWidth/2) + 'px';
        },
        top : function(elem){
            var popHeight = elem.offsetHeight,
                popWidth = elem.offsetWidth,
                horn = document.createElement('span');
            horn.className = 'horn horn_bottom';
            elem.appendChild(horn);
            horn.style.top = (popHeight - hornWidth/2) - 2 + 'px';
            horn.style.left = (popWidth/2 - hornWidth/2) + 'px';
        }

    };

    //设置弹框的位置
    var setPosition = {

        left : function(curr,elem){
            var elemHeight = elem.offsetHeight,
                elemWidth = elem.offsetWidth,
                currHeight = curr.offsetHeight,
                currX = curr.offsetLeft,
                currY = curr.offsetTop,
                parentScrollTop = getTop(curr),
                parentScrollLeft = getLeft(curr);
            elem.style.left = currX - elemWidth - hornWidth - parentScrollLeft + 'px';
            elem.style.top = currY - elemHeight/2 + currHeight/2 - parentScrollTop + 'px';
            //归零
            scrollTop = 0;
            scrollLeft = 0;
        },
        right : function(curr,elem){

            var elemHeight = elem.offsetHeight,
                currHeight = curr.offsetHeight,
                currWidth = curr.offsetWidth,
                currX = curr.offsetLeft,
                currY = curr.offsetTop,
                parentScrollTop = getTop(curr),
                parentScrollLeft = getLeft(curr);
            elem.style.left = currX + currWidth + hornWidth + -parentScrollLeft + 'px';
            elem.style.top = currY - elemHeight/2 + currHeight/2 - parentScrollTop + 'px';
            //归零
            scrollTop = 0;
            scrollLeft = 0;
        },
        bottom : function(curr,elem){
            var currHeight = curr.offsetHeight,
                elemWidth = elem.offsetWidth,
                currWidth = curr.offsetWidth,
                currX = curr.offsetLeft,
                currY = curr.offsetTop,
                parentScrollTop = getTop(curr),
                parentScrollLeft = getLeft(curr);
            elem.style.left = currX - elemWidth/2 + currWidth/2 - parentScrollLeft + 'px';
            elem.style.top = currY + currHeight + hornHeight - parentScrollTop + 'px';
            //归零
            scrollTop = 0;
            scrollLeft = 0;
        },
        top : function(curr,elem){
            var elemHeight = elem.offsetHeight,
                elemWidth = elem.offsetWidth,
                currWidth = curr.offsetWidth,
                currX = curr.offsetLeft,
                currY = curr.offsetTop,
                parentScrollTop = getTop(curr),
                parentScrollLeft = getLeft(curr);
            elem.style.left = currX - elemWidth/2 + currWidth/2 - parentScrollLeft + 'px';
            elem.style.top = currY - elemHeight - hornHeight - parentScrollTop + 'px';
            //归零
            scrollTop = 0;
            scrollLeft = 0;
        }

    };

    /*
    * 当父元素有可能有scrollTop和scrollLeft的时候会影响定位
    * 所以需要进行递归处理，计算当前所有父元素的scrollTop和scrollLeft
    * 最后再修正定位，保持始终是相对与窗口左上角进行定位
    *
    * */
    function getTop(e){
        if(e.parentNode != null){
            var scroll = e.parentNode.scrollTop;
            scroll = scroll == undefined ? 0 : scroll;
            scrollTop += scroll;
            getTop(e.parentNode);
        }
        return scrollTop;
    }

    function getLeft(e){
        if(e.parentNode != null){
            var scroll = e.parentNode.scrollLeft;
            scroll = scroll == undefined ? 0 : scroll;
            scrollLeft += scroll;
            getTop(e.parentNode);
        }
        return scrollLeft;
    }

    //页面加载完时自动执行
    init();

    //页面大小改变时重新计算
    window.addEventListener('resize',function(){
        init();
    });

};

如果有兴趣一起谈讨互相学习的欢迎留言，一起改改BUG，菜鸟一枚多多关注！

web_LamHo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap模拟对话框
weixin_30535167的博客
09-10 159
怎样获得远程数据，这是一个很纠结的问题。 同事推荐了一个别的模拟对话框，但是最后我都没用。 还是想用原生的，结果就是这样了。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=devic...
Bootstrap从入门到实战---模态框
Season CSDN博客
07-07 183
Bootstrap从入门到实战—模态框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-f
Bootstrap框架: 模拟小风车科技官网
weixin_42839080的博客
09-21 3963
插件地址:http://www.bootcss.com Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 本次我们利用它来模拟小风车科技的官网,因为它的官网开发也是利用这个框架,所以模拟起来难度不是很大.先看效果: &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;
BootStarp模态框大小尺寸的控制
zlt尼玛银行
08-22 2万+
BootStarp 默认提供了3中，模态框 的宽度。效果如下： 1，默认： 效果： 2，添加class 2 效果 3 添加class 3 效果
Bootstrap模态框modal使用注意（关闭modal有遮罩框（黑框）、调用.modal(‘show‘)第一次有效，第二次无效解决方法、以及解绑modal框绑定的方法）
munangs的博客
10-27 1423
Bootstrap模态框modal使用注意（关闭modal有遮罩框（黑框）、调用.modal('show')第一次有效，第二次无效解决方法、以及解绑modal框绑定的方法）
jQuery弹框
01-10
为了提高代码复用性和灵活性，许多开发者会选择使用现成的jQuery弹框插件，如jQuery UI的Dialog、bootstrap的Modal或SweetAlert2等。这些插件提供了丰富的配置选项和预设样式，可以快速集成到项目中，满足不同需求。...
jquery弹框demo
04-19
除了这些基础的弹框功能，jQuery还提供了丰富的插件和库来增强弹框效果，例如Bootstrap的Modal组件，SweetAlert2等。这些插件提供了更美观、可定制化的弹框，包括动画效果、自定义按钮、回调函数等。 在"jquery...
Bootstrap 模态框自定义点击和关闭事件详解
12-29
模态框避免点击背景处关闭： 1、div初始化时添加属性 aria-hidden=”true” data-backdrop=”static” 2、在需要显示模态框，初始化时 $(‘#myModal').modal({ backdrop: ‘static', ... keyboard: false //触
如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框
09-02
通过以上步骤，你可以根据项目需求，利用Bootstrap的Modal组件轻松创建具有自定义功能的alert、confirm和modal对话框。这种方式不仅可以提供更好的用户体验，还能保持界面风格的一致性，使得代码更加模块化和易于...
零基础Bootstrap入门教程(16)--模态框
程序员大阳
02-24 2875
本文目录1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结 1. 概述 模态框这个名字有点高雅了，其实就是对话框，用来弹出一个新的界面。 模态框的使用非常的场景，例如在用户管理页面，当进行用户新增时，可以点击新增按钮，弹出一个窗体供填入用户信息然后保存。 注意Bootstrap的模态框一次只能显示一个，不能在打开一个模态框后尝试继续打开第二个。 2. 模态框样式 模态框相关的样式类比较多，我个人是感觉有些过于复杂了，当然这里也不排除Bo
bootstrap模态框实现拖拽
咕咕鸡的博客
12-14 4573
bootstrap modal模态框实现拖拽
bootstrap中模拟模态框和进度条动态删除数据
且行且珍惜
09-01 2435
本文是介绍用bootstrap的模态框和进度条动态展示操作 1：完成基本的布局     基本的表格布局                         id：             邮箱：             密码：             操作：                         @foreach (var item in Model)
bootstrap tab 模拟点击_【第七课】Bootstrap的魅力
weixin_27791839的博客
12-29 217
前言从零开始学前端系列课程，与传统的视频大课堂教学不同，没有填鸭；也普通做练习题的方式不同，没有假想的模拟题。 本课程拆出80个左右必须掌握的技能点，并对其分组，从易到难地列出学习曲线。同时从真实项目中拆解出与技能一一对应的不同难度的任务，通过解决任务来巩固夯实知识。 这就是IT修真院集自适应学习、师兄辅导、在线一站式学习的DWS学习法（Learning by Doing ，Learing by ...
bootstrap的Hello World
weixin_34122604的博客
02-14 274
<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"...
bootstrap-select 联动框 后台php模拟数据接受
qq_27970999的博客
10-18 856
bootstrap-select 动态加载数据 数据循环后要加  select.selectpicker('refresh'); HTML 部分 2个select 服务种类 请选择 服务类别 请选择 js 部分  json数据var serClass=[ {name:'普通服务',value:'1'}
bootstrap的模态框的使用
lucky_ly的博客
06-23 1万+
bootstrap的模态框 如果只想单独使用模态框功能，可以单独引入modal.js，和bootstrap的css,在bootstrap的包中，可引入bootstrap.js。 用法 通过data属性，比如设置某个butto的data-toggle=’“modal”，同时设置 data-target="#myModal" 选择器内容， 通过js直接用代码 $(’#myModal’).modal(...
bootstrap弹出层效果
热门推荐
Hello,你好!
12-12 5万+
bootstrap弹出层效果
Bootstrap模态框modal的高度和宽度设置
伟强的博客
04-08 3万+
（1）高度 将style=“height:900px”放在或者更外层上，整个模态框的高度不会发生变化 如下图所示： 将style=“height:900px”放在上，是将整个模态框（包括头部、中间、末尾）设置为高度为900px;如下图所示： 若将style=“height:900px放在、、会引起对应部分高度变化如后面图片： （2）宽度
bootstrap 弹框
最新发布
03-28
Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发者快速构建响应式网页。其中，Bootstrap弹框是一种常用的交互组件，用于在页面上显示一些提示、警告或者用户交互的内容。 Bootstrap弹框有两种类型：模态框（Modal）和警告框（Alert）。模态框是一种覆盖在页面上的弹出窗口，可以用来显示详细信息、表单、图片等内容。警告框则是一种简单的提示框，用于显示警告、成功、错误等信息。 使用Bootstrap弹框需要引入Bootstrap的CSS和JavaScript文件，并按照一定的HTML结构和属性来定义弹框的内容和行为。以下是一个简单的示例： ```html <!-- 模态框示例 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="myModalLabel">模态框标题</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> 模态框内容... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> <!-- 警告框示例 --> <div class="alert alert-success" role="alert"> 这是一个成功的警告框。 </div> ``` 在上述示例中，模态框通过`data-toggle="modal"`和`data-target="#myModal"`来触发弹出，并使用`<div class="modal">`来定义模态框的结构。警告框则使用`<div class="alert">`来定义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值