javascript 模拟弹窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟弹出层</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        body,html{
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }
        #demo{
            width: 436px;
            margin: 30px auto;
            overflow: hidden;
        }
        .btn{
            width: 196px;
            margin: 10px;
        }
        /* 弹窗的样式 */
        p{
            padding: 0px;
            margin: 0px;
        }
        #model {
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.6;
            filter: alpha(opacity=60);
            position: absolute;
            left: 0px;
            top: 0px;
        }
        #modelCont{
            padding: 5px 2px;
            opacity: 1;
            filter: alpha(opacity=100);
            width: 600px;
            background-color: #fff;
            border-radius: 4px;
            position: absolute;
            top: 100px;
            left:50%;
            margin-left: -300px;
            z-index: 2;
        }
        #modelCont h2{
            font: 18px/30px "微软雅黑";
            margin:0px 0px 5px 0px;
            color: #666;
            text-align: center;
        }
        #modelCont .foot{
            text-align: center;
            border-top: 1px solid #ccc;
            color: #5cb85c;
            line-height: 30px;
            cursor: pointer;
        }
        #modelCont .foot span{
            width: 297px;
            display: inline-block;
            margin: 2px 0px;
        }
        #modelCont .foot span.left{
            border-right: 1px solid #ccc;   
        }
        #modelCont .body{
            padding: 5px 10px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <div id="demo">
        <div>
            <button class="btn btn-default" onclick="Module.show('我是默认弹窗')">默认弹窗</button>
            <button class="btn btn-primary" onclick="Module.show('我是confrim弹窗','confrim')">confrim弹窗</button>
        </div>
        <div>
            <button class="btn btn-info" onclick="Module.show('我是alert弹窗')">alert弹窗</button>
            <button class="btn btn-success" onclick="Module.show('我是延迟弹窗','time')">延迟关闭弹窗</button>
        </div>
    </div>
    <script type="text/javascript">
        // window.onload = function (){
        //  Module.show("我是弹窗的主题内容我是弹窗的主题内容我是弹窗的主题内容我是弹窗的主题内容我是弹窗的主题内容","confrim");
        // }
        var Module = {
            show : function (val,pro){
                this.hide();
                var body = document.body;
                var model = document.createElement("div");
                model.id = "model";
                var innerArr = [];
                var modelCont = document.createElement("div");
                modelCont.id = "modelCont";
                innerArr.push("<h2>弹出层</h2>");
                innerArr.push("<div class='body'>")
                innerArr.push("<p>"+val+"</p>")
                innerArr.push("</div>");
                if (pro == 'time') {
                    setTimeout(function(){
                        //这里使用this不可以！
                         Module.hide();
                    },3000)
                }else if(pro == "confrim"){
                    innerArr.push("<div class= 'foot'>")
                    innerArr.push("<span class='left' onclick='Module.comfirmFalse()'>取消</span><span onclick='Module.comfirmTrue()'>确定</span>")
                    innerArr.push("</div>");
                }else{
                    innerArr.push("<div class= 'foot'>")
                    innerArr.push("<p onclick='Module.hide()'>确认</p>")
                    innerArr.push("</div>");
                }
                modelCont.innerHTML = innerArr.join("");
                body.appendChild(modelCont);
                body.appendChild(model);
            },
            hide : function (){
                var body = document.body;
                var model = document.getElementById("model");
                var modelCont = document.getElementById("modelCont");
                if (model) {
                    body.removeChild(model);
                    body.removeChild(modelCont);
                }
            },
            comfirmTrue : function (){
                this.hide();
                return true;
            },
            comfirmFalse : function (){
                this.hide();
                return false;
            } 
        }
    </script>
</body>
</html>

最后编辑于：2017.12.05 00:23:03

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,236评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,867评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,715评论 0赞 340
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,899评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,895评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,733评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,085评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,722评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,025评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,696评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,816评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,447评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,057评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,009评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,254评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,204评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,561评论 2赞 343

javascript 模拟弹窗

推荐阅读更多精彩内容