jquery.popup.js-兼容IE8的简单jQuery模态窗口插件

jquery.popup.js是一款简单的兼容IE8浏览器的jQuery模态窗口插件。该模态窗口插件没有过多的参数，通过简单的调用就可以生成带动画过渡效果的模态窗口，非常简洁。

使用方法

下载压缩包，在页面中引入jQuery和jquery.popup.js文件。

             
<script src="js/jquery.min.js"></script>               
<script src="js/jquery.popup.js"></script>               
              

HTML结构

该模态窗口的基本HTML结构为：创建一个全屏的遮罩层。

<div class="popup js__popup js__slide_top">
  ....
</div>                
              

在遮罩层内放置模态窗口的内容，以及一个关闭模态窗口的按钮。

<div class="popup js__popup js__slide_top">
  <a href="#" class="p_close js__p_close" title="关闭">
    <span></span><span></span>
  </a>
  <div class="p_content">
    <p>这是第一个模态窗口</p>
  </div>
</div>                
              

创建一个超链接用于打开模态窗口。

<a href="#" class="lal js__p_start">点击打开模态窗口</a>                
              

CSS样式

在jquery.popup.css文件中提供了模态窗口的一些基本CSS样式。其中模态窗口的关闭按钮使用几个<span>元素来制作，但是在IE8中不支持这些CSS属性，所以看不到关闭的小叉。你可以修改为使用图片来制作关闭按钮。

/** 关闭按钮的CSS样式 **/
.p_close { 
  position:absolute; 
  top:0; 
  right:0; 
  width:16px; 
  height:12px; 
  padding:15px 11px 0 0; 
}
.p_close span { 
  display:block; 
  width:18px; 
  height:5px; 
  background:#333; 
}
.p_close span:first-child {
  -ms-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.p_close span:last-child {
  margin:-5px 0 0;
  -ms-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  transform:rotate(135deg);
}                
              

初始化插件

在页面DOM元素加载完毕之后，可以通过simplePopup()方法来初始化该模态窗口插件。

$(function() {
  $(".js__p_start).simplePopup();
});