4种弹框

末蓝、 2023-02-24 13:27 30阅读 0赞

# 1、最基本的三种弹窗 #

**alert，confirm，prompt**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>js三种弹窗</title>
        </head>
        <body>
            <span onclick="doson(1)">alert()</span>
            <span onclick="doson(2)">confirm(option)</span>
            <span onclick="doson(3)">prompt(option1,[option2])</span>
        </body>
        <script>
            function doson(num){
                if(num == 1){
                    alert("这是一Alert");
                }else if( num == 2){
                    //返回一个布尔值，点击确定返回true,点击取消返回false
                    var isbeauty = confirm("准备好，游山玩水了吗？");
                    if(isbeauty){
                        alert("OK， Let's Go now !");
                    }else{
                        alert("不再考虑考虑了");
                    }
                }else{
                    //option1：数据类型是字符串；是弹框里的提示文字。
                    //option2：数据类型是字符串；是弹框里输入框的value预留值,第二个参数为空时，弹框输入框中的值为空。
                    //返回一个输入框的内容
                    var tess = prompt("当山峰没有棱角的时候，你就开始好吗？");
                    alert(tess);
                }
            }
        </script>
    </html>

![4种弹框][4]

![4种弹框][4 1]

![4种弹框][4 2]  
![4种弹框][4 3]

# 2、lhgDialog弹窗提示窗口 #

**lhgDialog是一个功能强大且兼容面广的对话框组件，它拥有精致的界面与友好的接口**  
**兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>LghDialog弹框</title>
            <script type="text/javascript" src="lghdialog_js/jquery.min.js" ></script>
            <script type="text/javascript" src="lghdialog_js/lhgdialog.js" ></script>
        </head>
        <body>
            <a onclick="lghdialog()">优雅</a>
    
        </body>
        <script>
    
            //具体方法
            function lghdialog(){
                var dialog = $.dialog({
                        title: '欢迎',
                        content: '欢迎使用lhgdialog对话框组件！',
                        icon: 'success.gif',
                        ok: function(){
                                 this.title('警告').content('请注意lhgdialog两秒后将关闭！').lock().time(2);
                                return false;
                        }
                });
            }
        </script>
    </html>

![4种弹框][4 4]![4种弹框][4 5]

窗口lhgdialog.min.js文件的url参数  
**A 参数形式为：**

**self：指定弹出窗口的页面**  
类型：String  
默认：'false'  
说明：此参数只用在框架页面中，如果不写此参数或值为false时则窗口跨框架弹出在框架最顶层页面，如果值为true则不跨框架，而在当前面页弹出。

**skin：多皮肤共享CSS文件名**  
类型：String  
默认：'default'  
说明：不写此参数则值为default。如果你想在同一页面使用不同皮肤的窗口，此处的值就为多皮肤共存的CSS的文件名  
url参数不需要设定的就可以不写，不写时就使用默认值。

**B 按钮相关**

**ok：确定按钮回调函数**  
类型：Function|Boolean  
默认：null  
说明：函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮  
**cancel：取消按钮回调函数**  
类型：Function|Boolean  
默认：null  
说明：1.函数如果返回false将阻止对话框关闭；函数this指针指向内部api；  
2.如果传入true表示只显示有关闭功能的按钮，标题栏的关闭按钮其实就是取消按钮，点击同样触发cancel事件  
3.如果值为false时则隐藏标题栏右边的关闭按钮  
**okVal：确定按钮文字**  
类型：String  
默认：确定  
**cancelVal：取消按钮文字**  
类型：String  
默认：取消  
**min：是否显示最小化按钮**  
类型：Boolean  
默认：true  
**max：是否显示最大化按钮**  
类型：Boolean  
默认：true  
**button：自定义按钮**  
类型：Array  
默认：null  
说明：  
配置参数成员：  
name —— 按钮名称  
callback —— 按下后执行的函数  
focus —— 是否聚焦点  
disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）  
示例：  
参数如：\[\{name: '登录', callback: function () \{\}\}, \{name: '取消'\}\] 。注意点击按钮默认会触发按钮关闭动作，需要阻止触发关闭请让回调函数返回false

**C 尺寸相关**  
**width：指定窗口的宽度**  
类型：Number|String  
默认：'auto'  
说明：1. 设置窗口的宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容  
2.如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整  
**height：指定窗口的高度**  
类型：Number|String  
默认：'auto'  
说明：1.设置窗口的高度，可以带单位。  
2.如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整  
**minWidth：最小宽度限制**  
类型：Number  
默认：96  
说明：此参数值只能为数字  
**minHeight：最小高度限制**  
类型：Number  
默认：32  
说明：此参数值只能为数字

**D 位置相关**  
**fixed：开启静止定位**  
类型：Boolean  
默认：false  
说明：静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响  
**left：相对于可视区域的X轴的坐标**  
类型：Number|String  
默认：'50%'  
说明：可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整  
**top：相对于可视区域的Y轴的坐标**  
类型：Number|String  
默认：'50%'  
说明：可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整

**E 交互相关**  
**time：设置对话框显示时间**  
类型：Number  
默认：null  
说明：以秒为单位  
**resize：是否允许用户调节尺寸**  
类型：Boolean  
默认：true  
**drag：是否允许用户拖动位置**  
类型：Boolean  
默认：true  
**esc：是否允许用户按Esc键关闭对话框**  
类型：Boolean  
默认：true  
说明：只有窗口获得焦点后才能使用此功能  
**cache：是否缓存iframe方式加载的窗口内容页**  
类型：Boolean  
默认：true  
说明：只有使用iframe方式加载的单独页面的内容时此参数才有效  
**extendDrag：是否开启增强拖拽体验**  
类型：Boolean  
默认：true  
说明：1.此属性为全局性设置，不能在窗口调用的参数里设置，只能使用lhgdialog.setting.extendDrag来设置  
2.防止鼠标落入iframe导致不流畅，对超大对话框拖动优化  
 **F 视觉相关**  
**lock：开启锁屏**  
类型：Boolean  
默认：false  
说明：中断用户对话框之外的交互，用于显示非常重要的操作/消息，所以不建议频繁使用它，它会让操作变得繁琐  
**background：锁屏遮罩颜色**  
类型：String  
默认：'\#FFF'  
说明：请注意这是一个会影响到全局的配置，后续出现的对话框的遮罩颜色都和此设置一样，再设置不再起作用  
**opacity：锁屏遮罩透明度**  
类型：Number  
默认：.5  
说明：请注意这是一个会影响到全局的配置，后续出现的对话框的遮罩透明度都和此设置一样，再设置不再起作用  
**icon：定义消息图标**  
类型：String  
默认：null  
说明：可定义“skins/icons/”目录下的图标名作为参数名（一定要包含后缀名）  
**titleIcon：标题栏左边的小图标**  
类型：String  
默认：null  
说明：可定义“skins/icons/”目录下的图标名作为参数名（一定要包含后缀名）  
**padding：内容与边界填充边距(即css padding)**  
类型：String  
默认：'15px 10px'  
说明：如果内容页为iframe方式加载的则在css里需要设置为0，要不在IE6中易出问题  
**skin：多皮肤共存时指定的皮肤样式**  
类型：String  
默认：''  
说明：指定窗口要使用的皮肤的主类名  
 **G 高级相关**  
id：设定对话框唯一标识  
类型：String|Number  
默认：null  
说明：1.防止重复弹出  
2.定义id后可以使用this.get(youID)和lhgdialog.list\[youID\]获取扩展方法  
**zIndex：重置全局zIndex初始值**  
类型：Number  
默认：1976  
说明：用来改变对话框叠加高度，请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。  
init：对话框弹出后执行的函数  
类型：Function  
默认：null  
说明：如果是以iframe方式加载的内容页此函数会在内容页加载完成后执行  
**close：对话框关闭前执行的函数**  
类型：Function  
默认：null  
说明：函数如果返回false将阻止对话框关闭。请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close都将执行。  
**parent：打开子窗口的父窗口对象**  
类型：Object  
默认：null  
说明：此参数只用在打开多层窗口都使用遮罩层时才会用到此参数，注意多层窗口锁屏时一定要加此参数

--------------------

**窗口实例对象内部方法**  
**close()：关闭对话框**  
参数：无  
说明：在需要关闭窗口时可调用此方法  
**reload(win,url)：刷新或跳转指定的页面**  
参数1：指定的要刷新或跳转的页面的window对象  
参数2：要跳转到的页面地址  
**show()：显示对话框**  
参数：无  
**hide()：隐藏对话框**  
参数：无  
**title(value)：写入标题**  
参数1：标题的文本  
说明：无参数则返回创建的窗口对象实例  
**content(value)：向窗口中写入内容**  
参数1：窗口中的内容  
说明：如果参数的前3个字符为'url:'参使用iframe方式加载单独的内容页，无参数则返回创建的窗口对象实例  
**button(arguments)：插入一个自定义按钮**  
参数1：name -- 按钮名称  
参数2：callback -- 按下后执行的函数  
参数3：focus -- 是否聚焦点  
参数4：disabled -- 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）  
说明：此参数为多个对象  
示例：  
button(\{  
name: '登录',  
focus: true,  
callback: function()\{\}  
\},\{  
name: '取消'  
\});  
**position(left,top)：重新定位对话框**  
参数1：X轴的坐标  
参数2：Y轴的坐标  
说明：参数可以为数字或带单位的字符如：'200px'或使用'0%' ~ '100%'作为相对坐标  
**size(width,height)：重新设定对话框大小**  
参数1：窗口的宽度  
参数2：窗口的高度  
说明：参数可以为数字或带单位的字符如：'200px'或使用'0%' ~ '100%'百分值单位  
**max()：最大化窗口**  
参数：无  
**min()：最小化窗口**  
参数：无  
**lock()：锁屏**  
参数：无  
**unlock()：解锁**  
参数：无  
**time(val,callback)：定时关闭（单位秒）**  
参数1：数值，以秒为单位  
参数2：回调函数  
说明：参数2为窗口关闭前执行的函数  
**focus() ：自动设置窗口中焦点元素**  
参数：无  
**zindex() ：置顶窗口**  
参数：无  
**get(id,object) ：根据指定id获取相应的对象**  
参数1：窗口的id  
参数2：是否返回的是窗口实例对象  
说明：参数2的值只有为数字1时才返回指定id的窗口的实例对象  
**api：内容页中调用窗口实例对象接口**  
说明：此对象属性是附加在iframe元素的一个属性，在iframe方式加载的内容页中通过调用此函数来获取窗口的实例对象，示例：var api = frameElement.api; 注：此句代码是加在iframe方式加载的内容页中的，一定要注意  
**opener：加载窗口组件页面的window对象**  
说明：此属性主要用在iframe方式加载的内容页中，示例：var api = frameElement.api, W = api.opener; 此时的W即为加载窗口组件页面的**window对象**  
iframe：iframe方式加载内容的iframe对象  
说明：此属性主要用于在窗口组件调用页面操作窗口中的iframe对象  
iwin：iframe方式加载内容页的window对象  
说明：此属性主要用于在窗口组件调用页面操作窗口中的window对象，示例：var dg = $.dialog(\{'url:content.html',init:function()\{ if( this.iwin.document.body ) alert('窗口内容页加载完成'); \});  
**窗口外部方法**  
**$.dialog.focus：获取焦点的窗口实例对象**  
说明：可以使用此属性获取儿得焦点的窗口的对象，示例：var dg = $.dialog.focus; 此时的dg就是当前焦点窗口的对象实例  
**$.dialog.list：所有窗口对象实例的集合**  
说明：通过此属性可获取所有打开的窗口对象，示例：关闭页面所有对话框  
var list = $.dialog.list;  
for( var i in list )\{  
list\[i\].close();  
\}  
**$.dialog.top：获取lhgdialog可用最高层window对象**  
说明：这与直接使用window.top不同，它能排除url参数self为true时定义的顶层页面为调用窗口组件页面或者顶层页面为框架集的情况  
**$.dialog.data(name,value)：跨框架数据共享写入接口**  
参数1：存储的数据名  
参数2：将要存储的任意数据(无此项则返回被查询的数据，如果此值为false就删除指定名称的数据)  
说明：框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情，常规情况下你必须知道框架的名称才能进行数据交换，如果是在复杂的多层框架下操作简直就是噩梦。  
而data方法就是为了解决这个问题，你完全不用管框架层级问题，它可以写入任何类型的数据，而做到各个页面之间数据共享。  
扩展的一些提示性的窗口  
**$.dialog.alert(content,callback)：警告消息**  
参数1：内容  
参数2：窗口关闭时执行的回调函数  
**$.dialog.confirm(content,yes,no)：确认**  
参数1：内容  
参数2：确定按钮回调函数  
参数3：取消按钮回调函数  
**$.dialog.prompt(content,yes,value)：提问**  
参数1：内容  
参数2：确定按钮回调函数  
参数3：文本框默认值  
**$.dialog.tips(content,time,icon,callback)：短暂提示**  
参数1：内容  
参数2：显示时间  
参数3：提示图标  
参数4：提示关闭时执行的函数  
**$.dialog.load(url,options,cache)：Ajax填充内容**  
参数1：地址  
参数2：配置参数  
参数3：是否允许缓存. 默认false

# 3 优化Jquery弹框 #

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>优化jQuery提示框</title>
            <link href="./jquery_cj/Fytx_Tips.css" rel="stylesheet" type="text/css">
            <script src="./jquery_cj/jquery-1.10.2.js"></script>
            <script src="./jquery_cj/jquery.min.js"></script>
            
            <script type="text/javascript" src="./jquery_cj/Fytx_Tips_Config.js"></script>
            <script type="text/javascript" src="./jquery_cj/Fytx_Tips.js"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("#alertbtn").click(function() {
                        $.alert("提示信息", "这个是弹出alert框！");
                    });
                    $("#confirmbtn").click(function() {
                        $.confirm("提示信息", "这个是弹出confirm框！");
                    });
                    $.isok = function() {
                        alert("点击了确定按钮！");
                    }
                    $.iscancel = function() {
                        alert("点击了取消按钮！");
                    }
                    $("#toastbtn").click(function() {
                        $.toast("这个是弹出toast框！");
                    });
                });
            </script>
        </head>
    
        <body style="zoom: 1;">
            <p align="center">
                <input type="button" value="弹出alert框" id="alertbtn">
                <input type="button" value="弹出confirm框" id="confirmbtn">
                <input type="button" value="弹出toast框" id="toastbtn">
            </p>
    
        </body>
    
    </html>

**Fytx\_Tips\_Config.js**

var _fytx_alert_bg = 0.3;
    var _fytx_alert_bgcolor = "#000000";
    var _fytx_alert_box_bgcolor = "#ffffff";
    var _fytx_alert_title_color = "#333333";
    var _fytx_alert_titleline_color = "#3475f5";
    var _fytx_alert_message_color = "#333333";
    var _fytx_alert_btn_color = "#ffffff";
    var _fytx_alert_btn_bgcolor = "#3475f5";
    var _fytx_confirm_bg = 0.3;
    var _fytx_confirm_bgcolor = "#000000";
    var _fytx_confirm_box_bgcolor = "#ffffff";
    var _fytx_confirm_title_color = "#333333";
    var _fytx_confirm_titleline_color = "#3475f5";
    var _fytx_confirm_message_color = "#333333";
    var _fytx_confirm_okbtn_color = "#ffffff";
    var _fytx_confirm_okbtn_bgcolor = "#3475f5";
    var _fytx_confirm_cancelbtn_color = "#333333";
    var _fytx_confirm_cancelbtn_bgcolor = "#ffffff";
    var _fytx_toast_bg = 0.3;
    var _fytx_toast_bgcolor = "#000000";
    var _fytx_toast_box_bg = 0.5;
    var _fytx_toast_box_bgcolor = "#000000";
    var _fytx_toast_color = "#ffffff";
    var _fytx_toast_close = true;

**Fytx\_Tips.css**

@charset "UTF-8";
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0
        }
    
        .fytx_alert_background {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999999
        }
    
        .fytx_alert_background .fytx_alert_box {
            width: 452px;
            height: auto;
            padding: 0 15px 20px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 8px;
            position: relative;
            top: 50%;
            left: 50%;
            margin: -167px 0 0 -226px
        }
    
        .fytx_alert_background .fytx_alert_title {
            width: 100%;
            height: 45px;
            border-bottom: 1px solid #99bafa;
            font-size: 16px;
            color: #333;
            line-height: 45px;
            text-align: center
        }
    
        .fytx_alert_background .fytx_alert_message {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 25px 40px 35px;
            text-align: center;
            font-size: 16px;
            color: #333;
            box-sizing: border-box;
            line-height: 28px
        }
    
        .fytx_alert_background .fytx_alert_btn {
            display: block;
            width: 100px;
            height: 34px;
            line-height: 34px;
            background-color: #3475f5;
            cursor: pointer;
            font-size: 14px;
            color: #fff;
            border-radius: 4px;
            border: 1px solid transparent;
            margin: 0 auto;
            text-align: center
        }
    
        .fytx_confirm_background {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999999
        }
    
        .fytx_confirm_background .fytx_confirm_box {
            width: 452px;
            height: auto;
            padding: 0 15px 20px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 8px;
            position: relative;
            top: 50%;
            left: 50%;
            margin: -167px 0 0 -226px
        }
    
        .fytx_confirm_background .fytx_confirm_title {
            width: 100%;
            height: 45px;
            border-bottom: 1px solid #99bafa;
            font-size: 16px;
            color: #333;
            line-height: 45px;
            text-align: center
        }
    
        .fytx_confirm_background .fytx_confirm_message {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 25px 40px 35px;
            text-align: center;
            font-size: 16px;
            color: #333;
            box-sizing: border-box;
            line-height: 28px
        }
    
        .fytx_confirm_background .fytx_confirm_okbtn {
            display: inline-block;
            width: 100px;
            height: 34px;
            line-height: 34px;
            background-color: #3475f5;
            cursor: pointer;
            font-size: 14px;
            color: #fff;
            border-radius: 4px;
            border: 1px solid transparent;
            text-align: center;
            margin-left: 84px;
            margin-right: 47px
        }
    
        .fytx_confirm_background .fytx_confirm_cancelbtn {
            display: inline-block;
            width: 100px;
            height: 34px;
            line-height: 34px;
            background: fff;
            cursor: pointer;
            font-size: 14px;
            color: #3475f5;
            border-radius: 4px;
            border: 1px solid transparent;
            text-align: center;
            border: 1px solid #3475f5
        }
    
        .fytx_toast_background {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999999
        }
    
        .fytx_toast_background .fytx_toast_box {
            width: 452px;
            height: auto;
            cursor: pointer;
            padding: 15px 20px;
            text-align: center;
            background: rgba(0, 0, 0, .5);
            color: #fff;
            font-size: 16px;
            border-radius: 8px;
            line-height: 24px;
            position: relative;
            top: 50%;
            left: 50%;
            margin: 0 0 0 -226px
        }

**Fytx\_Tips.js**

--------------------

# 4 layer一个让你想到即可做到的Web弹窗 #

[《layer》][layer]

![4种弹框][4 6]

<!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8" />
                <title>Layer</title>
                <script type="text/javascript" src="js/jquery.min.js" ></script>
                <script type="text/javascript" src="layer/layer.js" ></script>
                <style>
                    a{
                        color: #FD482C;
                    }
                </style>
            </head>
            <body>
                <div id="frozen_redant">
                    <ol type="A">
                        <li>望着天下起了雪</li>
                        <li>满天的雪花是那么浪漫</li>
                        <li>对你的爱就像那片雪花</li>
                        <li>散落一地</li>
                    </ol>
                </div>
                <a onclick="layer_dialog(1)">初体验</a>   
                <a onclick="layer_dialog(2)">皮肤</a>   
                <a onclick="layer_dialog(3)">询问</a>   
                <a onclick="layer_dialog(4)">提示</a>   
                <a onclick="layer_dialog(5)">切换风格</a>   
                <a onclick="layer_dialog(6)">捕获</a>   
                <a onclick="layer_dialog(7)">页面</a>   
                <a onclick="layer_dialog(8)">自定义</a>   
                <a id="xifu" onclick="layer_dialog(9)">吸附tips</a>   
                <a onclick="layer_dialog(10)">url其他页面</a>   
                <a onclick="layer_dialog(11)">url其他窗</a>   
                <a onclick="layer_dialog(12)">正在加载</a>   
                <a onclick="layer_dialog(13)">加载中....</a>   
                <a id="oherxifu" onclick="layer_dialog(14)">小tips</a>   
                <a onclick="layer_dialog(15)">prompt层</a>   
                <a onclick="layer_dialog(16)">tab标签</a>   
                <hr />
                <span style="color: indianred;">提示信息</span>  
                <a onclick="layer_dialog(17)">demo1</a>   
                <a onclick="layer_dialog(18)">demo2</a>   
                <a onclick="layer_dialog(19)">demo3</a>   
                <a onclick="layer_dialog(20)">demo4</a>   
                <a onclick="layer_dialog(21)">demo5</a>   
                <hr/>
                <span style="color: indianred;">加载中</span>  
                <a onclick="layer_dialog(22)">demo1</a>   
                <a onclick="layer_dialog(23)">demo2</a>   
                <a onclick="layer_dialog(24)">demo3</a>   
                <a onclick="layer_dialog(25)">demo4</a>   
                <a onclick="layer_dialog(26)">demo5</a>   
                <hr />
                <span style="color: indianred;">弹窗设置</span>  
                <a id="wuxian" onclick="layer_dialog(27)">无限弹窗</a>   
                <a onclick="layer_dialog(28)">透明询问框</a>   
    
            </body>
            <script>
                function layer_dialog(num){
                    switch (num){
                        case 28:
                            //配置一个透明的询问框
                            layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
                                time: 20000, //20s后自动关闭
                                btn: ['明白了', '知道了', '哦']
                            });
                            break;
                        case 27:
                        //多窗口模式，层叠置顶
                            layer.open({
                                type: 2 //此处以iframe举例
                                ,title: '当你选择该窗体时，即会在最顶端'
                                ,area: ['390px', '330px']
                                ,shade: 0
                                ,offset: [ //为了演示，随机坐标
                                    Math.random()*($(window).height()-300)
                                    ,Math.random()*($(window).width()-390)
                                ]
                                ,maxmin: true
                                ,content: 'https://blog.51cto.com/13479739/2493634'
                                ,btn: ['继续弹出', '全部关闭'] //只是为了演示
                                ,yes: function(){
                                    $("#wuxian").click(); //此处只是为了演示，实际使用可以剔除
                                }
                                ,btn2: function(){
                                    layer.closeAll();
                                }
    
                                ,zIndex: layer.zIndex //重点1
                                ,success: function(layero){
                                    layer.setTop(layero); //重点2
                                }
                            });
                            break;
                        case 22:
                            //加载层-默认风格
                            layer.load();
                            break;
                        case 23:
                            //加载层-风格2
                            layer.load(1);
                            break;
                        case 24:
                            //加载层-风格3
                            layer.load(2);
                            break;                  
                        case 25:
                            //加载层-风格4
                            layer.msg('加载中', {
                                icon: 16
                                ,shade: 0.01
                            });
                            break;              
                        case 26:
                            //打酱油
                            layer.msg('打个酱油', {icon: 4});
                            break;
                        case 17:
                            //信息框-例1
                            layer.alert('见到你真的很高兴', {icon: 6});
                            break;
                        case 18:
                            //信息框-例2
                            layer.msg('你确定你很帅么？', {
                                time: 0 //不自动关闭
                                ,btn: ['必须啊', '丑到爆']
                                ,yes: function(index){
                                    layer.close(index);
                                    layer.msg('雅蠛蝶 O.o', {
                                        icon: 6
                                        ,btn: ['嗷','嗷','嗷']
                                    });
                                }
                            });
                            break;
                        case 19:
                            //信息框-例3
                            layer.msg('这是最常用的吧');
                            break;
                        case 20:
                            //信息框-例4
                            layer.msg('不开心。。', {icon: 5});
                            break;
                        case 21:
                            //信息框-例5
                            layer.msg('玩命卖萌中', function(){
                            //关闭后的操作
                            });
                            break;
                        case 16:
                            //tab层
                            layer.tab({
                                area: ['600px', '300px'],
                                tab: [{
                                    title: 'TAB1', 
                                    content: '页面显示的内容<br/>页面显示的内容<br/>'
                                }, {
                                    title: 'TAB2', 
                                    content: '钱呢女女'
                                }, {
                                    title: 'TAB3', 
                                    content: '内容3'
                                }]
                            });
                            break;
                        case 15:
                        //prompt层
                        layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
                            layer.close(index);
                            layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
                                layer.close(index);
                                layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
                            });
                        });
                        break;
    
                        case 14:
                            //小tips
                            layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '#oherxifu', {
                             //1上 默认右，3下 4左
                             tips: [1, '#3595CC'],
                                time: 4000
                            });
                            break;
    
                        case 13:
                            //loading层
                            var index = layer.load(1, {
                                shade: [0.1,'#fff'] //0.1透明度的白色背景
                            });
                            break;
    
                        case 12:
                            //加载层
                            var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                            break;
    
                        case 11:
                            //iframe窗
                            layer.open({
                                type: 2,
                                title: false,
                                closeBtn: 0, //不显示关闭按钮
                                shade: [0],
                                area: ['340px', '215px'],
                                offset: 'rb', //右下角弹出
                                time: 2000, //2秒后自动关闭
                                anim: 2,
                                content: ['https://blog.51cto.com/13479739', 'no'], //iframe的url，no代表不显示滚动条
                                end: function(){ //此处用于演示
                                    layer.open({
                                        type: 2,
                                        title: '很多时候，我们想最大化看，比如像这个页面。',
                                        shadeClose: true,
                                        shade: false,
                                        maxmin: true, //开启最大化最小化按钮
                                        area: ['893px', '600px'],
                                        content: '//blog.51cto.com/13479739/2493634'
                                    });
                                }
                            });
                            break;
                        case 10:
                            //iframe层
                            layer.open({
                                type: 2,
                                title: 'layer mobile页',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['380px', '70%'],
                                content: '1.html/' //iframe的url
                            }); 
                            break;
                        case 9:
                            //tips层
                            layer.tips('我是tips,我吸附在这个元素上！！！', '#xifu');
                            break;
                        case 1://第一个LayUI弹框
                            layer.alert('这是你的第一个LayUI弹框');
                            break;
                        case 2://第三方拓展皮肤
                            layer.alert('第三方拓展皮肤', {
                                icon: 1,
                                skin: 'layer-ext-moon' //[《Layer皮肤制作说明》](https://layer.layui.com/skin.html#publish)
                            })
                            break;
                        case 3:
                            //询问框
                            layer.confirm('愿意和俺一起，游山玩水，巴山夜雨吗？', {
                                btn: ['可以','不行'] //按钮
                            }, function(){
                                layer.msg('就这么约定了', {icon: 1});
                            }, function(){
                                layer.msg('怎么能这样，再想想', {
                                    time: 20000, //20s后自动关闭
                                    btn: ['明白了', '知道了']
                                });
                            });
                            break;
                        case 4:
                            //提示层
                            layer.msg('给我点提示吧！');
                            break;
                        case 5:
                            //墨绿深蓝风
                            layer.alert('墨绿风格，点击确认看深蓝', {
                                skin: 'layui-layer-molv' //样式类名
                                ,closeBtn: 0
                            }, function(){
                                layer.alert('偶吧深蓝style', {
                                    skin: 'layui-layer-lan'
                                    ,closeBtn: 0
                                    ,anim: 4 //动画类型
                                });
                            });
                            break;
                        case 6:
                            //捕获页
                            layer.open({
                                type: 1,
                                shade: false,
                                title: false, //不显示标题
                                //捕获的元素
                                content: $('#frozen_redant'), 
                                cancel: function(){
                                    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
                                }
                            });
                            break;
                        case 7:
                            //页面层
                            layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['420px', '240px'], //宽高
                                content: '这里是html页面的内容'
                            });
                            break;
                        case 8:
                            //自定页
                            layer.open({
                                type: 1,
                                skin: 'layer-ext-moon', //样式类名
                                closeBtn: 0, //不显示关闭按钮
                                anim: 2,
                                shadeClose: true, //开启遮罩关闭
                                content: '即传入skin:"样式名"，然后你就可以为所欲为了。你怎么样给她整容都行'
                            });
                            break;
    
                        default:
                            break;
                    }
                }
            </script>
        </html>

![4种弹框][4 7]

**【PS：每个按钮，这里就不点了，自己点去吧】**

[4]: /images/20230209/fb2a2c2d59d346afb96f42cd8f2251f9.png
[4 1]: /images/20230209/6091bc871c4e4382a43e2568a904adf4.png
[4 2]: /images/20230209/3cf77d1de53641d8936b0528e36feed1.png
[4 3]: /images/20230209/21d04be869214befa219e1d6bbfe8537.png
[4 4]: https://s4.51cto.com/images/blog/202005/11/909bbd80421671728dd5de529f38da78.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[4 5]: /images/20230209/673ad281422d4f23a843edfd0e7d323a.png
[layer]: https://layer.layui.com/
[4 6]: /images/20230209/6890ba59768c41b5aee6dfdd2ffdc514.png
[4 7]: /images/20230209/359242ba83fb43989333082476147200.png