我的弹窗插件（原创）

所属分类： JQ特效 UI 工具提示

查看演示立即下载

插件描述：我的弹窗提供基本功能，并且支持ie8及以上的浏览器。

更新时间：2018/1/12 下午5:52:15

更新说明：修改removeClass函数

更新时间：2018/1/10 上午10:16:03

更新说明：修改我的弹窗文档第六条到‘我的对话框’文档的链接错误

我的弹窗插件的使用方法

发布时间：2018-1-10 1:05

功能说明：

这个弹窗插件，主要实现的是弹窗的一些基本功能，如遮罩层：背景颜色、透明度、是否可以点击遮罩关闭弹窗；显示、关闭弹窗的按钮；弹窗显示、关闭的动画方式、动画时间；弹窗是否跟随页面滚动；弹窗在跟随页面滚动是出现的位置；一个弹窗中切换多种内容；支持手机模式；可以一个页面定义多个弹窗；ie8及以上支持（ie8目前不支持动画效果）。注：红色的类名my-popup、popup-content是必须有的，使用类名加自定义属性绑定显隐事件时，popup-show、popup-close与data-linked-id也是必须有的。

最简单的使用方式

<div class="my-popup one-popup" id="onePopup">
  <div class="popup-content">
    <p class="msg">我是一个弹窗，点击透明遮罩层我就会隐藏</p>
  </div>
</div>
 
****************************************
 
var oOnePopup = new MyPopup('onePopup');

说明：该插件必须传的参数是id，它的默认配置是：固定定位、点击背景关闭、无动画、背景transparent、透明度0

弹窗的配置参数与方法

<div class="my-popup two-popup" id="twoPopup">
  <div class="popup-content">
    <p class="msg">我是弹窗2</p>
    <div class="btn-box">
      <button>我使用close()方法方式</button>
      <button class="popup-close" data-linked-id="twoPopup">我使用类名加上data-lined-id属性方式</button>
      </div>
  </div>
</div>
 
*****************************************
 
var oTwoPopup = new MyPopup('twoPopup', {
  param: {
    isfixed: false,    // 弹窗是否固定居中（默认true可以） 值：true、false
    bgclose: false,    // 可否通过点击背景关闭弹窗 （默认true可以） 值：true、false
    type: 'top',   // 弹窗出现的方式（默认none无动画） 值：none、opacity、top、right、bottom、left
    time: 400,     // 弹窗出现动画的时长（默认200ms）
    bgcolor: '#777',// 背景颜色（默认transparent）
    opacity: 0.2  // 背景透明度（默认0）
  },
  show: function () {
    console.log("这是显示弹窗前调用的函数");
  },
  close: function () {
    console.log("这是默认的关闭弹窗前调用的函数");
  }
});

配置参数
isfixed	弹窗是否固定居中（默认true可以）值：true、false
bgclose	可否通过点击背景关闭弹窗（默认true可以）值：true、false
type	弹窗出现的方式（默认none无动画）值：none、opacity、top、right、bottom、left
time	弹窗出现动画的时长（默认200ms）
bgcolor	背景颜色（默认transparent）
opacity	背景透明度（默认0）
showFn	默认在弹窗弹出前执行的函数，如果是异步函数，有可能弹窗已经出现了，异步函数还没执行完。如果要使用异步函数，最好使用show()方法。这个在配置中的showFn方法，是显示弹窗时的默认方法，如果使用show()方法的时候传了函数进来，就不会执行该方法了，只会执行show()传入的方法。
closeFn	默认在弹窗隐藏前执行的函数，如果是异步函数，有可能弹窗已经隐藏了，异步函数还没执行完。如果要使用异步函数，最好使用close()方法。close()传函数时同show()

方法
show()	使用该方法，可以使处于隐藏状态的弹窗显示出来（在创建了对应的弹窗对象之后）
close()	使用该方法，可以使处于显示状态的弹窗隐藏起来（在创建了对应的弹窗对象之后）
content()	在一个弹窗中有多个popup-content时，该方法才有作用。该方法可以按传入的iNum显示对应的popup-content

show()方法参数
fn	可选。函数，弹窗显示前需要执行的参数。
oPos	可选。对象，在isfixed为false的情况下有效，即弹窗出现时相对于上于左的定位距离。有top，left两个属性

close()方法参数
fn	可选。函数，弹窗隐藏前需要执行的参数。

content()方法参数
iNum	必填。整数，0到n，传入同一个弹窗下的popup-content的下标。

随页面滚动的弹窗

<div class="my-popup three-popup" id="threePopup">
  <div class="popup-content">
    <p class="msg">我是一个弹窗，点击透明遮罩层我就会隐藏</p>
  </div>
</div>
 
******************************************************
 
var oThreeShow = document.getElementById('threeShow');
var oThreePopup = new MyPopup('threePopup', {
  param: {
    isfixed: false,
    bgcolor: '#917C77',
    opacity: 0.2
  }
});
oThreeShow.onclick = function () {
    oThreePopup.show(null, {top: 200, left: 100});
}

显示与关闭弹窗的两种方法

<div class="my-popup four-popup" id="fourPopup">
  <div class="popup-content">
    <p class="msg">我是一个弹窗，点击透明遮罩层我就会隐藏</p>
    <div class="btn-box">
      <button class="popup-close" data-linked-id="fourPopup">关闭方法一</button>
      <button id="fourClose">关闭方法二</button>
    </div>
  </div>
</div>
 
*****************************************************
     
var oFourShow = document.getElementById('fourShow');
var oFourClose = document.getElementById('fourClose');
var oFourPopup = new MyPopup('fourPopup', {
  param: {
    bgcolor: '#999',
    opacity: 0.2
  }
});
oFourShow.onclick = function () {
  oFourPopup.show();
}
oFourClose.onclick = function () {
  oFourPopup.close();
}

方法一：使用指定的类名（popup-show、popup-close）及一个搭配的自定义属性（data-linked-id）实现弹窗的显隐。

方法二：调用弹窗对象的show()、close()方法，实现对弹窗的显隐。如给一个按钮绑定点击事件，在点击事件中调用方法。

一个弹窗中切换多种内容

<div class="my-popup five-popup" id="fivePopup">
  <div class="popup-content">
    <p class="msg">one</p>
    <button id="fiveOneBtn">下一步</button>
  </div>
  <div class="popup-content">
    <p class="msg">two</p>
    <button id="fiveTwoBtn">下一步</button>
  </div>
  <div class="popup-content">
    <p class="msg">three</p>
    <button id="fiveThreeBtn">完成</button>
  </div>
</div>
 
******************************************************************
 
var oFiveBtn1 = document.getElementById('fiveOneBtn');
var oFiveBtn2 = document.getElementById('fiveTwoBtn');
var oFiveBtn3 = document.getElementById('fiveThreeBtn');
var oFivePopup = new MyPopup('fivePopup', {
  param: {
    bgcolor: '#999',
    opacity: 0.2,
    time: 200,
    type: 'opacity'
  },
  showFn: function () {
    oFivePopup.content(0);
  }
})
oFiveBtn1.onclick = function () {
  oFivePopup.content(1);
}
oFiveBtn2.onclick = function () {
  oFivePopup.content(2);
}
oFiveBtn3.onclick = function () {
  oFivePopup.close();
}

说明：在有多个popup-content的时候可以通过MyPopup.content(iNum)方法来决定显示哪一个popup-content。iNum是从0开始的popup-content的顺序数。

使用我的弹窗插件可以实现其它的自定义插件，如我的对话框插件我的对话框插件的使用方法

功能说明：对话框插件基于弹窗插件，引入my_alert.js后会在window上绑定一个MyPopup构造函数的oMyAlert实例。该实例有五个方法show、close、chagneMsg、addClass、removeClass。对话框的显隐是使用的添加删除节点的方式，每一次的显示都是一个新的节点，在就节点没有被删除的情况下在调用show方法也不会创建另一个节点。

只传文本，最简单的显示方式

var oOneShow = document.getElementById('oneShow');
oOneShow.onclick = function () {
  oMyAlert.show('我是谁？');
}

说明：这一种最简单的显示方式，即不设置按钮，会在1.5秒之后自动关闭对话框。

配置参数、方法

var oTwoShow = document.getElementById('twoShow');
oTwoShow.onclick = function () {
  var iNum = 0;
  oMyAlert.show('我是谁？', {
    bgclose: false,      // 是否可以点击背景关闭对话框（默认false不能）
    bgcolor: '#999'      // 背景颜色（默认transparent）
    opacity: 0.2,        // 背景透明度(默认0)
    msgAlign: 'c',       // 消息文本的对齐方式：l -> 左对齐；c -> 居中对齐（默认）；r -> 右对齐
    btnAlign: 'c',       // 按钮的对齐方式：l -> 左对齐；c -> 居中对齐（默认）；r -> 右对齐
    aBtnTxt: ['确定', '取消', '关闭'],    // 按钮的个数及其文本（默认无按钮）
    btn1: function () {  // btn1对应第一个按钮，btn+n对应第n个按钮的点击事件，如果不设置对应的事件，默认为调用close()关闭弹窗
      if ( iNum == 0 ) {
        oMyAlert.changeMsg('我是确定按钮，再点我就要消失了！');
        iNum = 1;
      } else {
        oMyAlert.close();
      }
    },
    btn2: function () {
      iNum = 0;
      oMyAlert.changeMsg('我是取消按钮，你点我呀！');
    },
    showFn: function () {
      oMyAlert.addClass('state1');
    }
  });
}

配置参数
msg	必须。show方法的第一个参数，是将要显示的对话框的文本
bgclose	可选。true，false。是否可以点击背景关闭对话框（默认false不能）
bgcolor	可选。背景颜色（默认transparent）
opacity	可选。背景透明度(默认0)
msgAlign	可选。消息文本的对齐方式：l -> 左对齐；c -> 居中对齐（默认）；r -> 右对齐
btnAlign	可选。按钮的对齐方式：l -> 左对齐；c -> 居中对齐（默认）；r -> 右对齐
aBtnTxt	可选。按钮的个数及其文本（默认无按钮）
btn+n	可选。这个是按钮的方法，btn1就是aBtnTxt中第一个按钮的点击方法。如aBtnTxt中的按钮没有对应的btn方法，将默认为点击关闭对话框。
showFn	可选。在弹窗显示之前执行的函数，注意是一个同步函数哈。

方法
show	最重要的方法，调用该方法会添加并显示对话框
close	关闭对话框
changeMsg	调用该方法，将改变对话框中的文本
addClass	调用该方法将给弹窗的popup-content添加类名
removeClass	调用该方法将给弹窗的popup-content删除类名

可以根据自己的需求改变默认的弹窗样式，或者是设置多种样式然后在显示的时候决定用那种样式。

// my_alert.css文件第一行，这是对话框默认样式
.my-alert .popup-content {
  padding: 0;
  background: #424F63;
  color: #fff;
  font-size: 14px;
}

// my_alert.css，要自定义弹窗样式可以在my_alert.css文件最下面这样写
.my-alert .state1 {
  background: #71B69A;
  border: 1px solid #3E7D6C;
  border-radius: 10px;
  box-shadow: 0 0 10px #aaa;
  color: #fff;
}
.my-alert .state2 {
  background: #EDEECF;
  border: 2px solid #EDEECF;
  border-radius: 4px;
  box-shadow: 0 0 10px #aaa;
  color: #7B2025;
}

<button id="threeShow1">默认样式</button>
<button id="threeShow2">样式一</button>
<button id="threeShow3">样式二</button>
 
********************************************************
 
var oThreeShow1 = document.getElementById('threeShow1');
var oThreeShow2 = document.getElementById('threeShow2');
var oThreeShow3 = document.getElementById('threeShow3');
 
oThreeShow1.onclick = function () {
  oMyAlert.show('我是默认样式，我有按钮', {
    bgcolor: '#999',
    opacity: 0.2,
    aBtnTxt: ['确定']
  })
}
 
oThreeShow2.onclick = function () {
  oMyAlert.show('我是样式一，我没有按钮，我会在1.5秒后消失', {
    bgcolor: '#ccc',
    opacity: 0.4,
    showFn: function () {
      oMyAlert.addClass('state1');
    }
  })
}
 
var i;
var arr = ['改变1', '改变2']
oThreeShow3.onclick = function () {
  i = 0;
  oMyAlert.show('我是样式二，我有按钮，点击关闭我才会消失', {
    bgcolor: 'green',
特别申明：
			本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
			本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
			如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery仿微信支付密码输入框（修改版）
下一个特效： html5压扁小鸟小游戏