基于JQ的自定义弹窗组件
程序员文章站
2022-06-08 20:28:50
window.onresize = function() { /* 默认设置字体为可视区/7.5 max:256px min */ document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 ......
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>基于jq的自定义弹窗组件</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/popup.css">
</head>
<style>
a {display: inline-block;text-align: center;text-decoration: none;font-size:20px;background: #e5e5e5;}
</style>
<body> <div id="box"> <a href="javascript:;" class="btnmodel">按钮弹窗</a> <a href="javascript:;" class="tipmodel">提示弹窗</a> <a href="javascript:;" class="loadmodel">加载弹窗</a> <input type="submit" value="提交"> </div> </body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/rem.js"></script>
<script src="js/popup.js"></script>
<script>
$(function () {
var popupmodel = new popup();
//按钮弹窗
$(".btnmodel").on("click", function() {
popupmodel.init({
title : '你好,我是标题',
tiptext : '我是文本内容',
showbtn : true,
showdouble : true,
success : function (res) {
console.log(res);
if(res.confirm){
console.log('用户点击了确认' + json.stringify(res));
}else{
console.log('用户点击了取消' + json.stringify(res));
}
}
});
});
//提示弹窗
$(".tipmodel").on("click", function() {
var popupmodel = new popup();
popupmodel.init({
title : '提示弹窗标题',
tiptext : '提示弹窗文本'
});
settimeout(function () {
popupmodel.close();
}, 3000)
});
//加载弹窗
$(".loadmodel").on("click", function() {
var popupmodel = new popup();
popupmodel.init({
loadimg: './img/load.gif'
});
settimeout(function () {
popupmodel.close();
}, 1500)
});
})
</script>
</html>
window.onresize = function() { /* 默认设置字体为可视区/7.5 -----max:256px min */ document.documentelement.style.fontsize = document.documentelement.clientwidth / 7.5 + 'px'; var devicewidth = document.documentelement.clientwidth; if (devicewidth > 640) { devicewidth = 640 } }; onresize();
@charset "utf-8"; body,div,dl,dt,dd,ul,li,pre,form,fieldset,select,input,textarea,button,p,img,iframe{ margin: 0; padding: 0; } h1,h2,h3,h4,h5,h6{ font-weight:normal; margin: 0; padding: 0; } body{ width: 100%; font-family: "microsoft yahei","simsun","宋体"; background-color: #fff; -webkit-overflow-scrolling: touch;overflow-scrolling: touch; } /* 重置button边框 */ button{ border: none; } /* 去掉列表前的标识, li 会继承 */ ol,ul{list-style: none;} /* 让链接默认不显示下划线*/ a{cursor: pointer;text-decoration: none;} /* 清理浮动 */ .clearfix:before,.clearfix:after{ display: block; content: " "; clear: both; } /* for ie67*/ .clearfix{zoom: 1;} /* html5 媒体文件跟 img 保持一致 */ audio,canvas,video{ display: inline-block; *display: inline; *zoom: 1; } address,caption,cite,code,dfn,em,th{ font-style: normal; font-weight: normal; } .box-sizing{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /*p{ text-align:justify; text-justify:distribute;}*/ div, p, span { text-overflow: ellipsis; word-break: break-all; word-wrap: break-word; } /*iphone及ipad下输入框默认内阴影*/ input, button { outline: none; -webkit-appearance: none; } textarea { resize: none; outline: none; } img { vertical-align: middle; border: 0; width: 100%; } a:active, a:hover { outline: 0; } /*ios和android下触摸元素时出现半透明灰色遮罩*/ a, input { border: none; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } input[type=button] { cursor: pointer; } input[type=submit] { cursor: pointer; }
@charset "utf-8"; /* 弹窗样式class --alert_wrap 尽量不要修改样式名称,如若修改,js文件中class也要做对应修改 */ /*遮罩层*/ .alert_wrap{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.7); z-index: 99; text-align: center } /*弹窗盒子*/ .alert_wrap .alertcont{ position: absolute; border-radius: 5px; text-align: center; width: 5.3rem; background: white; top:35%; left:1.1rem; box-sizing: border-box; } /*加载弹窗中的弹窗盒子*/ .alert_wrap .alertload{ background: rgba(0,0,0,0); } /*弹窗标题*/ .alert_wrap .alerttitle{ font-size: 0.28rem; color: black; text-align: center; padding: 0.2rem; word-wrap: break-word; } /*弹窗文本*/ .alert_wrap .alerttext{ font-size: 0.25rem; color: black; text-align: center; padding-bottom: 0.15rem; word-wrap: break-word; } /*弹窗文本域*/ .alert_wrap .alertarea{ font-size: 0.28rem; color: black; text-align: center; padding-top: 0.1rem; padding-bottom: 0.15rem; word-wrap: break-word; } /*弹窗按钮*/ .alert_wrap .alertbtn{ width: 100%; background: white; text-align: center; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; height: auto; } .alert_wrap .alertbtn input{ width: 50%; float: left; background: whitesmoke; color: black; cursor: pointer; padding: 0.2rem; font-size: 0.28rem; } /*取消按钮*/ .alert_wrap .alertbtn .cancel_btn{ border-right: 1px solid #d3cdcd; border-top: 1px solid #d3cdcd; border-bottom-left-radius: 5px; } /*确认按钮*/ .alert_wrap .alertbtn .alert_confirm_btn{ border-top: 1px solid #d3cdcd; border-bottom-right-radius: 5px; color: rgb(0, 174, 255); } .alert_wrap .alertbtn .confirm_int{ width: 100%; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } /*加载图片*/ .alert_wrap .load_img{ width: 40px; height: 40px; position: absolute; left: 50%; top:50%; margin-left: -20px; margin-top: -20px; } @media screen and (max-width:321px) { html, body { font-size: 14px; line-height: 18px; } .alert_wrap .alertinput{ margin-left: 0.03rem; } } @media screen and (min-width:321px) and (max-width:400px) { html, body { font-size: 16px; line-height: 22px; } .alert_wrap .alertinput{ margin-left: 0.03rem; } } @media screen and (min-width:400px) { html, body { font-size: 18px; line-height: 28px; } .alert_wrap .alertinput{ margin-left: 0.04rem; } } @media screen and (min-width:640px){ html,body { font-size: 18px; line-height: 28px; } .alert_wrap .alertinput{ margin-left: 0.05rem; } }
/* @description --model:1.btn 2.tip 3.load @param --setting --存放配置 $.extend() 外部配置可以覆盖默认配置 */ function popup() { this.alertwrap = null;//遮罩层 this.alertcont = null;//弹窗盒子 this.result = {}; //消息存放 //默认配置参数 this.setting = { // title:'标题', // tiptext:'说明文字', // textarea : '额外添加区域', // loadimg : '加载图片url', showbtn: false, //true 显示按钮 false 隐藏 (默认没有按钮) showdouble: false, //true 双按钮 false 单按钮 canceltext: '取消',//默认,外部定义可覆盖 confirmtext: '确认' } } popup.prototype.init = function (options) { $.extend(this.setting, options); //默认配置与自定义配置 this.mark(); this.create(); this.dir(); }; //遮罩 popup.prototype.mark = function () { this.alertwrap = $("<div class='alert_wrap'></div>"); }; //弹窗 popup.prototype.create = function () { this.alertcont = $("<div class='alertcont'></div>"); //title if (this.setting.title) { this.alerttitle = $("<div class='alerttitle'>" + this.setting.title + "</div>"); this.alertcont.append(this.alerttitle); } //tiptext if (this.setting.tiptext) { this.alerttext = $("<div class='alerttext'>" + this.setting.tiptext + "</div>"); this.alertcont.append(this.alerttext); } //textarea if (this.setting.textarea) { this.alertarea = $("<div class='alertarea'>" + this.setting.textarea + "</div>"); this.alertcont.append(this.alertarea); } //loadimg if (this.setting.loadimg) { this.alertcont.addclass("alertload"); this.alertloadimg = $("<img class='load_img' src='" + this.setting.loadimg + "' />"); this.alertcont.append(this.alertloadimg); } //showbtn if (this.setting.showbtn && this.setting.showdouble === true) { //双 this.alertbtn = $("<div class='alertbtn clearfix'></div>"); this.cancel_btn = $("<input class='cancel_btn' type='button' value=" + this.setting.canceltext + ">"); this.confirm_btn = $("<input class='alert_confirm_btn' type='button' value=" + this.setting.confirmtext + ">"); this.alertbtn.append(this.cancel_btn); this.alertbtn.append(this.confirm_btn); this.alertcont.append(this.alertbtn); } else if (this.setting.showbtn && this.setting.showdouble === false) { //单 this.alertbtn = $("<div class='alertbtn'></div>"); this.confirm_btn = $("<input class='alert_confirm_btn confirm_int' type='button' value=" + this.setting.confirmtext + ">"); this.alertbtn.append(this.confirm_btn); this.alertcont.append(this.alertbtn); } this.alertwrap.append(this.alertcont); $("body").append(this.alertwrap); }; //自定义函数 popup.prototype.dir = function () { var _this = this; if (this.cancel_btn) { this.cancel_btn.on("click", function () { _this.alertwrap.remove(); _this.result = { cancel: true, showcancel: "取消操作!" }; if (_this.setting.success) { _this.setting.success(_this.result); } }) } if (this.confirm_btn) { this.confirm_btn.on("click", function () { _this.alertwrap.remove(); _this.result = { confirm: true, showcancel: "确认操作!" }; if (_this.setting.success) { _this.setting.success(_this.result); } }) } }; //关闭 popup.prototype.close = function () { this.alertwrap.remove(); };
上一篇: 太特么耽误网购了
下一篇: 【OC底层】KVC原理