<!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. ubuntu16下面 redis 无法链接到客户端问题
			
    1.今天从github上面下载了一个项目,链接到自己的tomcat里面的redis,结果在虚拟机里面可以链接成功,但是在客户端总是提示链接失败.google之后,原来是 因为 需要在redis里面设置 ...
    
			
    2. 
						
  2. springboot整合fastdfs实现上传和下载
			
    FastDFS_Client源码 https://github.com/tobato/FastDFS_Client 友情提示:由于FastDFS_Client这个源码不是很多,并且目前没有找到相关文档 ...
    
			
    3. 
						
  3. 机器学习之LinearRegression与Logistic Regression逻辑斯蒂回归(三)
			
    一 评价尺度 sklearn包含四种评价尺度 1 均方差(mean-squared-error) 2 平均绝对值误差(mean_absolute_error) 3 可释方差得分(explained_v ...
    
			
    4. 
						
  4. NexusFile(文件管理器)
			
    NexusFile是一款来自于韩国的文件管理器,类似于TotalCommander,拥有两个并排的文件夹窗口. NexusFile软件的特性如下: 基本功能:复制/移动, 复制/剪切/粘贴, 删除/擦 ...
    
			
    5. 
						
  5. linux邮件客户端mutt日志文件，发不出邮件
			
    linux上面使用很方便的收发邮件客户端(即MUA),还有一个是mail,大家也可以试试. 在网上找了很多,都说需要msmtp配合使用,其实mutt里面也内建了smtp支持的. mutt and SM ...
    
			
    6. 
						
  6. 乘风破浪：LeetCode真题_011_Container With Most Water
			
    乘风破浪:LeetCode真题_011_Container With Most Water 一.前言 下面我们继续进行编程练习,可以说对于实际问题的活学活用是非常重要的.比如我们这次的题目,就需要从中 ...
    
			
    7. 
						
  7. rsync 服务器配置过程
			
    rsync的原理和相关算法不赘述,资料很多 1.准备两台机器并确保都已经安装rsync a机器:192.168.1.150 ,用作客户端测试 b机器:192.168.1.151用作server端 先介 ...
    
			
    8. 
						
  8. mvc项目中Controller执行完毕重定向到html的一个页面中
			
    String ip = request.getLocalAddr(); //取得服务器IP int port = request.getLocalPort(); //取得服务器端口 String ur ...
    
			
    9. 
						
  9. ChakraCore ,Net托管编程
			
    前言 有些有着复杂业务逻辑的应用程序,需要为用户提供高度自定化的功能.比如像Word中的宏,当然可以自己设计一套简易的脚本解析引擎,但考虑通用性,成熟度,其实选择一款JS脚本引擎,直接嵌入到应用系统中 ...
    
			
    10. 
						
  10. 【luogu P2831 愤怒的小鸟】 题解
			
    题目链接:https://www.luogu.org/problemnew/show/P2831 写点做题总结:dp,搜索,重在设计状态,状态设的好,转移起来也方便. 对于一条抛物线,三点确定.(0, ...
    
			
    11.