封装模态框弹框

最新推荐文章于 2023-07-28 17:45:34 发布

阿狸lyinshaofeng

最新推荐文章于 2023-07-28 17:45:34 发布

阅读量897

点赞数

文章标签： servlet java html

本文链接：https://blog.youkuaiyun.com/lyinshaofeng/article/details/127315546

版权

<!DOCTYPE html>

<head>

<title>通用模态框</title>

</head>

<body>

确认退出

</div>

<div class="subject">确认退出游戏?</div>

</div>

var btns = document.querySelectorAll("button");

btns[0].οnclick=function(){

// console.log("点击5元");

showModel("#model","确认购买","确定花费五块钱购买后羿么?", function(){

console.log("恭喜你, 购买成功");

}, function(){

console.log("下次还来找我买呀");

})

}

btns[1].οnclick=function(){

// console.log("点击10元");

showModel("#model","确认购买","确定花费10块钱购买精灵王么?", function(){

console.log("你的钱不够了");

}, function(){

setTimeout(function(){

showModel("#model","小心呀","过了这个村就没这个店,买吧?", function(){

console.log("恭喜你, 购买成功");

},function(){

console.log("问你两次都不买,真穷");

})

}, 500)

}, true)

}

btns[2].οnclick=function(){

// console.log("点击退出游戏");

showModel("#model","确认退出","确定退出游戏么?", function(){

console.log("关闭");

}, function(){

console.log("继续玩");

})

}

</script>

</body>

</html>

css样式

       #model{
           position: absolute;
           left: 0;
           top: 0;
           right: 0;
           bottom: 0;
           background-color: rgba(0, 0, 0, 0.6);
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 30px;
       }

       #model .modelDialog{
           width: 600px;
           height: 400px;
           background-color: aliceblue;
           position: relative;
       }

       #model .modelDialog .title{
           height: 60px;
           background-color: lightblue;
           text-align: center;
           line-height: 60px;
           position: relative;
       }
       #model .modelDialog .close{
           display: inline-block;
           width: 40px;
           text-align: center;
           height: 40px;
           line-height: 40px;
           border: 1px solid lightcoral;
           border-radius: 50%;
           position: absolute;
           right: 20px;
           top: 10px;
           z-index: 50;
       }

       #model .modelDialog .content{
           height: 360px;
           background-color: lightgray;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: space-around;

       }
       #model .modelDialog .content .options{
           width: 80%;
           display: flex;
           justify-content: space-around;
       }

       #model .modelDialog .content .options .btn{
           border: 1px solid lightcoral;
           border-radius: 5px;
           padding: 5px 10px;
       }