<!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. Android解析WindowManager（二）Window的属性
			
    前言 在上一篇文章我们学习了WindowManager体系,了解了Window和WindowManager之间的关系,这一篇我们接着来学习Window的属性. 1.概述 上一篇文章中我们讲过了Wind ...
    
			
    2. 
						
  2. 《ArcGIS Runtime SDK for Android开发笔记》——（4）、基于Android Studio构建ArcGIS Android开发环境
			
    1.前言 2015年1月15日,发布ArcGIS Runtime SDK for Android v10.2.5版本.从该版本开始默认支持android studio开发环境,示例代码的默认开发环境也 ...
    
			
    3. 
						
  3. MVC框架以及实例
			
    MVC框架 MVC(model,view,controller),一种将业务逻辑.数据.界面分离的方法组织代码的框架.在改进界面及用户交互的同时,不需要重写业务逻辑.MVC将传统的输入.处理和输出分离 ...
    
			
    4. 
						
  4. 排查 Azure 虚拟机的远程桌面连接问题
			
    与基于 Windows 的 Azure 虚拟机 (VM) 的远程桌面协议 (RDP) 连接可能会因各种原因而失败,使用户无法访问 VM. 问题可能出在 VM 上的远程桌面服务.网络连接或主计算机上的远 ...
    
			
    5. 
						
  5. C# 按位或，按位与, 按位异或
			
    a != b  ----->  a = a | b  , a 或者 b 只要有一个为 1, 那么,a 的最终结果就为 1 a &= b  ----->  a = a & b ...
    
			
    6. 
						
  6. jQuery中index()方法用法实例
			
    本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...
    
			
    7. 
						
  7. Python学习---Django重点之静态资源配置
			
    [官网静态文件介绍] https://docs.djangoproject.com/en/1.10/howto/static-files/ # settings.py 配置静态资源文件 # STATI ...
    
			
    8. 
						
  8. python基础语法1
			
    一.基础语法 1.常量 python语言没有真正的常量,它只是字面常量. 2.变量 变量是一个指针,它指向一块内存. 变量的命名规则: 1)只能包含字母.数字和下划线: 2)只能以字母或者下划线开始: ...
    
			
    9. 
						
  9. HTTP协议图--与 HTTP 协作的 Web 服务器
			
    HTTP 通信时,除客户端和服务器外,还有一些用于协助通信的应用程序.如下列出比较重要的几个:代理.缓存.网关.隧道.Agent 代理. 1.代理   代理 HTTP 代理服务器是 Web 安全.应用 ...
    
			
    10. 
						
  10. Python正则表达式(总)
			
    转载请标明出处: http://www.cnblogs.com/why168888/p/6445044.html 本文出自:[Edwin博客园] Python正则表达式(总) search(patte ...
    
			
    11.