2. 科技
  3. JavaScript封装自己的一个弹窗，是双按钮的，比较简单一些 ，其中引用了jQuery来写的方法，最后暴露出去，有更好的建议欢迎评论 。。。。...

JavaScript封装自己的一个弹窗，是双按钮的，比较简单一些 ，其中引用了jQuery来写的方法，最后暴露出去，有更好的建议欢迎评论 。。。。...

it2022-05-05  115
$(function(){ // 设置自执行函数 (function(jQuery){ // 定义构造函数 var Popup = function (title,text,fn) { this.title = title || '提示'; this.text = text || '你要提示什么呢？'; this.fn = fn || ''; this.toast(); } // 设置html Popup.html= `<div class="mask"> <div class="tips_box"> <div class="top"> <div class="title">提示</div> <div class="clear">X</div> </div> <div class="center"> <p>你是打算显示什么给用户呢？</p> </div> <div class="btn_box"> <div class="sure">确定</div> <div class="cancel">取消</div> </div> </div> </div>` // 给构造原型添加方法 Popup.prototype = { constructor: Popup, toast: function (){ if(this.isExist()){ $('.mask').show() }else { $('body').append(Popup.html) } this.setText(this.title,this.text); this.setFn(this.fn); }, // 判断弹窗是否存在 isExist: function(){ return $('.mask').length; }, // 定义提示文本 setText: function (title,text) { $('.mask').find('.title').html(title).end().find('p').html(text) }, // 注册定义的事件 setFn: function(backCall) { $('.mask').find('.clear,.cancel').click(function(){ $('.mask').hide() }) // $('.mask').find('.sure').off('click') $('.mask').find('.sure').click(function(){ $('.mask').hide(); // Popup.prototype.tips() // setTimeout(()=>{ // Popup.prototype.tips().hide() // }) backCall(); }) }, // tips: function(){ // return `<div class="tips"> // 点击了确定按钮 // </div>` // } } // 暴露出去 window.Popup = Popup; }($)) })

以上是js代码，使用了自执行函数，通过构造函数来封装方法，进而单独分开

css的代码： 

.mask { width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, .5); left:0; top: 0; } .mask .tips_box { width: 400px; height: 240px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .tips_box .top { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #000; } .tips_box .top .clear { position: absolute; right: 40px; width: 30px; height: 30px; border: 1px solid #aaa; border-radius: 50%; line-height: 30px; text-align: center; } .tips_box .top .title { font-size: 20px; color: #333; } .mask .tips_box .center { text-align: center; width: 100%; height: 100px; border-bottom: 1px solid #000; } .mask .tips_box .btn_box { width: 100%; height: 60px; display: flex; justify-content: space-around; box-sizing: border-box; padding: 10px 30px; } .tips_box .btn_box .sure, .tips_box .btn_box .cancel { width: 100px; line-height: 40px; text-align: center; font-size: 16px; color: green; border: 1px solid #000; } .tips_box .btn_box .cancel { color: #333; } .tips { width: 200px; line-height: 30px; text-align: center; border: 1px solid rgba(0,0,0,.4); border-radius: 8px; color: rgba(0,0,0,.6); position: absolute; top: 60px; left: 50%; transform: translateX(-50%); animation: all 0.5s; display: none; } /* html {font-size: 62.5%; 10 ÷ 16 × 100% = 62.5%} */

其中引用了jQuery这里的话，自己去引一个就好了，不多讲了

在新的页面中直接调用js最后暴露的方法即可

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>弹窗</title> <link rel="stylesheet" href="./popup.css"> </head> <body> <button class="btn1">弹窗1</button> <button class="btn2">弹窗2</button> <div class="tips"> 点击了确定按钮 </div> </body> </html> <script src="./jquery.js"></script> <script src="./popup.js"></script> <script> $(function(){ $('.btn1').click(function(){ console.log('1111') new Popup('温馨提示','你想搞什么啊？',function(){ // alert('1111') $('.tips').show() setTimeout(() => { $('.tips').hide() }, 1000); }) }) }) </script>

 

 

 

 

转载于:https://www.cnblogs.com/PinkYun/p/10228784.html

专利

最新回复(0)