<!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 () {

        //按钮弹窗
        $(".btnModel").on("click", function() {
 　　　　　　var popupModel = new Popup();
            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();

rem.js

@charset "UTF-8";

body,div,dl,dt,dd,ul,li,pre,form,fieldset,select,input,textarea,button,p,img,iframe{  margin:;  padding:;  }

h1,h2,h3,h4,h5,h6{ font-weight:normal; margin:; padding:; }

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:;}

/* HTML5 媒体文件跟 img 保持一致 */

audio,canvas,video{  display: inline-block;  *display: inline;  *zoom:;  }

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:;  width: 100%;  }

a:active, a:hover {  outline:;  }

/*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;  }

reset.css

@charset "UTF-8";

/*

   弹窗样式class --alert_Wrap 尽量不要修改样式名称，如若修改，JS文件中class也要做对应修改

*/

/*遮罩层*/

.alert_Wrap{

    position: fixed;

    width: 100%;

    height: 100%;

    left:;

    top:;

    background: rgba(0,0,0,0.7);

    z-index:;

    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;

    }

}

popup.css

/*

    @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();

};

popup.js



 


												


											
基于JQ的自定义弹窗组件的更多相关文章
	

    
								
  1. 基于 Python 的自定义分页组件
		
    基于 Python 的自定义分页组件 分页是网页中经常用到的地方,所以将分页功能分出来,作为一个组件可以方便地使用. 分页实际上就是不同的 url ,通过这些 url 获取不同的数据. 业务逻辑简介  ...
    
		
    2. 
						
  2. 基于jq插件开发及弹窗实例
		
    基于jq的插件开发是什么鬼,$.fn是什么鬼,我在实际工作中也遇到过这个问题,下面就让我们一起来看一看这些都是什么鬼. 首先我们介绍$.fn. $.fn是指jquery的命名空间,加上fn上的方法及属 ...
    
		
    3. 
						
  3. 基于DispatchProxy打造自定义AOP组件
		
    DispatchProxy是微软爸爸编写的一个代理类,基于这个,我扩展了一个AOP组件 暂时不支持依赖注入构造方法,感觉属性注入略显麻烦,暂时没打算支持 基于特性的注入流程 [AttributeUsa ...
    
		
    4. 
						
  4. uniapp 自定义弹窗组件
		
    先上效果: 组件源码:slot-modal.vue <template> <view class="modal-container" v-if="sho ...
    
		
    5. 
						
  5. 微信小程序 - 自定义弹窗组件
		
    2019-01-06:简化了一些代码,以及增加了可用性. // 弹窗配置 dialogConfig: { // 弹窗 dialogvisible: false, options: { // 显示关闭按 ...
    
		
    6. 
						
  6. vue3系列：vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件
		
    基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...
    
		
    7. 
						
  7. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer
		
    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...
    
		
    8. 
						
  8. uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果
		
    介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/an ...
    
		
    9. 
						
  9. svelte组件：Svelte自定义弹窗Popup组件|svelte移动端弹框组件
		
    基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. IEC_62304_CheckList
			
    IEC 62304 Reference Software Lifecycle Process Applicable for Class A Class B Class C PRIMARY LIFECY ...
    
			
    2. 
						
  2. [转]实现Hive数据同步更新的shell脚本
			
    引言: 上一篇文章<Sqoop1.4.4 实现将 Oracle10g 中的增量数据导入 Hive0.13.1 ,并更新Hive中的主表>http://www.linuxidc.com/Li ...
    
			
    3. 
						
  3. web application 访问控制
			
    http://secappdev.org/handouts/2012/Jim%20Manico%20%26%20%20Eoin%20Keary/Final%20-%20Access%20Control ...
    
			
    4. 
						
  4. ASP.NET错误处理的方式（二）
			
    要创建页中的全局处理程序,请创建 Page_Error 事件的处理程序.要创建应用程序范围的错误处理程序,请在 Global.asax 文件中将代码添加到 Application_Error 方法.只 ...
    
			
    5. 
						
  5. 一、C#简单读写
			
    using System.IO; static string configFileName = "config.json"; //不存在就直接新建文件夹 public static ...
    
			
    6. 
						
  6. 沉淀再出发:web服务器和应用服务器之间的区别和联系
			
    沉淀再出发:web服务器和应用服务器之间的区别和联系 一.前言 关于后端,我们一般有三种服务器(当然还有文件服务器等),Web服务器,应用程序服务器和数据库服务器,其中前面两个的概念已经非常模糊了,但 ...
    
			
    7. 
						
  7. scala当中的Actor并发编程
			
    注:Scala Actor是scala 2.10.x版本及以前版本的Actor. Scala在2.11.x版本中将Akka加入其中,作为其默认的Actor,老版本的Actor已经废弃. 1.什么是Sc ...
    
			
    8. 
						
  8. 文件属性及OS模块使用(IO入门2)
			
    转载请标明出处: http://www.cnblogs.com/why168888/p/6422270.html 本文出自:[Edwin博客园] 文件属性及OS模块使用(IO入门2) 1. pytho ...
    
			
    9. 
						
  9. java继承-final关键词用法
			
    final关键字特点: 1.可以用来修饰变量.方法.类. 2.修饰的变量是一个常量.一旦被赋值就不能被修改(常量一般都和static关键字配合使用) 3.修饰类代表此类不能被继承4.修饰方法代表次方法 ...
    
			
    10. 
						
  10. Linux和Unix的区别
			
    Linux      Unix 免费        收费 开源        不开源 硬件无要求   有要求 IBM Sun Hp 主流的Linux的发型版本: RedHat Fedora  Mand ...
    
			
    11.