jquery之弹框

矫情吗；* 2022-03-17 20:18 377阅读 0赞

用`jquery`实现弹框脚本的封装，

(function() { 
        $.MsgBox = { 
            Alert: function(title, msg) { 
                GenerateHtml("alert", title, msg);
                btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback
                btnNo();
            },
            Confirm: function(title, msg, callback) { 
                GenerateHtml("confirm", title, msg);
                btnOk(callback);
                btnNo();
            }
        }
        //生成Html
        var GenerateHtml = function(type, title, msg) { 
            var _html = "";
            _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';
            _html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';
            if (type == "alert") { 
                _html += '<input id="mb_btn_ok" type="button" value="确定" />';
            }
            if (type == "confirm") { 
                _html += '<input id="mb_btn_ok" type="button" value="确定" />';
                _html += '<input id="mb_btn_no" type="button" value="取消" />';
            }
            _html += '</div></div>';
            //必须先将_html添加到body，再设置Css样式
            $("body").append(_html);
            //生成Css
            GenerateCss();
        }
    
        //生成Css
        var GenerateCss = function() { 
            $("#mb_box").css({ 
                width: '100%',
                height: '100%',
                zIndex: '99999',
                position: 'fixed',
                filter: 'Alpha(opacity=60)',
                backgroundColor: 'black',
                top: '0',
                left: '0',
                opacity: '0.6'
            });
            $("#mb_con").css({ 
                zIndex: '999999',
                width: '300px',
                position: 'fixed',
                backgroundColor: 'White',
                borderRadius: '5px'
            });
            $("#mb_tit").css({ 
                display: 'block',
                fontSize: '.4rem',
                color: '#444',
                padding: '10px 15px',
                textAlign: 'center',
                fontWeight: 'bold'
            });
            $("#mb_msg").css({ 
                padding: '20px',
                lineHeight: '20px',
                textAlign: 'center',
                borderBottom: '1px dashed #DDD',
                fontSize: '13px'
            });
            $("#mb_ico").css({ 
                display: 'block',
                position: 'absolute',
                right: '10px',
                top: '9px',
                border: '1px solid Gray',
                width: '18px',
                height: '18px',
                textAlign: 'center',
                lineHeight: '16px',
                cursor: 'pointer',
                borderRadius: '12px',
                fontFamily: '微软雅黑'
            });
            $("#mb_btnbox").css({ 
                margin: '15px 0 10px 0',
                textAlign: 'center'
            });
            $("#mb_btn_ok,#mb_btn_no").css({ 
                width: '2.85rem',
                height: '.84rem',
                lineHeight: '.84rem',
                fontSize: '.31rem',
                color: '#1aad19',
                border: 'none',
                backgroundColor: 'white'
            });
            $("#mb_btn_no").css({ 
                marginLeft: '20px'
            });
            //右上角关闭按钮hover样式
            $("#mb_ico").hover(function() { 
                $(this).css({ 
                    backgroundColor: 'Red',
                    color: 'White'
                });
            }, function() { 
                $(this).css({ 
                    backgroundColor: '#DDD',
                    color: 'black'
                });
            });
            var _widht = document.documentElement.clientWidth; //屏幕宽
            var _height = document.documentElement.clientHeight; //屏幕高
            var boxWidth = $("#mb_con").width();
            var boxHeight = $("#mb_con").height();
            //让提示框居中
            $("#mb_con").css({ 
                top: (_height - boxHeight) / 2 + "px",
                left: (_widht - boxWidth) / 2 + "px"
            });
        }
        //确定按钮事件
        var btnOk = function(callback) { 
            $("#mb_btn_ok").click(function() { 
                $("#mb_box,#mb_con").remove();
                if (typeof(callback) == 'function') { 
                    callback();
                }
            });
        }
        //取消按钮事件
        var btnNo = function() { 
            $("#mb_btn_no,#mb_ico").click(function() { 
                $("#mb_box,#mb_con").remove();
            });
        }
    })();

使用示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        
    	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
        
    	<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    	<script type="text/javascript" src="js/msgBox.js"></script>
    </head>
    <body>
    	<input id="add" type="button" value="添加">
    	<input id="update" type="button" value="修改">
    	
    	
    	<script type="text/javascript"> $(function(){ $("#add").bind("click", function() { $.MsgBox.Alert("提示", "哈哈，添加成功！"); }); //回调函数可以直接写方法function(){alert("你点击了确定,重新进行认证");} function test() { alert("你点击了确定,重新进行认证"); } //也可以传方法名 test $("#update").bind("click", function() { $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test); }); }); </script>
    </body>
    </html>

页面显示

![image][]

[image]: /images/20220318/ed5153c3fb0d45a1a4c885ab35c2ebed.png

发表评论取消回复

表情：

评论列表（有 0 条评论，377人围观）

还没有评论，来说两句吧...

相关阅读

相关删除弹框

if (selectedRowsState && selectedRowsState.length > 0) { confirm({

╰+攻爆jí腚メ/ 2022年12月23日 00:35/ 0 赞/ 181 阅读

相关【jQuery】jQuery弹出框可拖拽移动

1.说明此demo需要用到jQuery和bootstrap，使用前需要先引入相关文件因为内容比较简单，所以就不多说明了 2.相关代码位置排版使用了绝对定

忘是亡心i/ 2022年10月07日 06:48/ 0 赞/ 238 阅读

相关 jQuery飞入登录弹出框代码

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/347eef108d8d40d

桃扇骨/ 2022年09月13日 01:58/ 0 赞/ 303 阅读

相关 Easyui 之window 弹出框

<div id="win" class="easyui-window" title="My Window" closed="true" style="width:300

末蓝、/ 2022年08月25日 08:46/ 0 赞/ 294 阅读

相关 [jquery]弹框，遮罩层

之前使用semantic的modal作为遮罩层。出现了一些关乎源代码的bug。所以自己必须要写一个自己的弹框以达到目的： ![这里写图片描述][SouthEast]

拼搏现实的明天。/ 2022年06月03日 04:18/ 0 赞/ 356 阅读

相关 JavaScript弹框

注意：弹窗使用反斜杠来换行![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

系统管理员/ 2022年04月12日 05:40/ 0 赞/ 327 阅读

相关 jQuery+Bootstrap美化弹出框

项目中很多弹出的警告框是通过alert()弹出的浏览器警告框，样式比较丑陋且和页面使用的Bootstrap框架样式不吻合，因此需要修改弹出框样式。采用jQuery+Boot

- 日理万妓/ 2022年04月11日 09:54/ 0 赞/ 921 阅读

相关 jquery之弹框

用`jquery`实现弹框脚本的封装， (function() { $.MsgBox = { Alert: functio

矫情吗；*/ 2022年03月17日 20:18/ 0 赞/ 378 阅读

相关 springBoot+layui+jquery+layui弹窗下拉框

layui 的增删改查。。。废话不多说上代码由于时间原因暂时只实现了查询的后台完整代码其他的会之后贴出来其实与查询相似有需要的可以等我贴出也可以照着查询仿写

Bertha 。/ 2022年01月07日 07:39/ 0 赞/ 448 阅读

相关 jquery使用dialog调用弹出框

1、jquery可以调用弹出框,语法如下：　　$.dialog("open", \{ id:'dialog', name : 'create-guide',

曾经终败给现在/ 2021年12月16日 08:43/ 0 赞/ 577 阅读