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

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

使用方法

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

HTML结构

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

....

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

这是第一个模态窗口

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

点击打开模态窗口

CSS样式

在jquery.popup.css文件中提供了模态窗口的一些基本CSS样式。其中模态窗口的关闭按钮使用几个元素来制作，但是在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();

});