«

jquery弹出窗口插件(兼容所有浏览器)分享

时间:2024-2-3 10:05     作者:韩俊     分类: Javascript


由于工作中经常碰到页面需要弹窗这种效果的,于是从网上下载的一些弹窗效果研究了下,总感觉有些弹窗效果虽然很酷,但问题很多,更要命的是代码一大堆大堆的,看着很头痛,于是根据实际需要自己用jquery写了一个弹窗效果并做成了插件的形式,有需要的可以下载下来看看。

jquery弹出窗口插件(兼容所有浏览器)效果

需要说明的是本例实现的比较粗糙,读者可以根据自己的实际情况做相应的修改,代码挺简单,看得懂jquery代码一定能看懂这个,下面主要说一下用法,该插件设置了如下几个参数:

'type' 弹窗里面的内容加载形式,目前只分为html url text三种,可选,默认为html形式。

'title' 弹窗标题,必须。

'url' 弹窗内容加载需要获取的内容的url地址,必须。

'prefix' 这里主要是为了防止css代码冲突而设置的,可选,默认为phpernote。

'width' 弹窗的宽度,必须。

'height' 弹窗的高度,必须。

'content' 当type设置为text的时候,弹窗里面需要显示的内容,可选,默认为空。

'cache' 弹窗内容加载是否允许缓存,可选,默认是false,不进行缓存。

下面看一个具体的实例,读者自己慢慢去体会吧。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#phpernote_overlay{position:absolute;top:0;left:0;z-index:100;width:100%;background-color:#CCC;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6}
#phpernote_window{position:absolute;background:#fff;z-index:102;color:#000000;border:0px solid #666}
#phpernote_nav{clear:both;height:30px;line-height:30px;background-color:#E8E8E8;padding:0 6px;border-bottom:1px solid #999;}
#phpernote_title{float:left;}
#phpernote_operat{float:right;}
#phpernote_content{text-align:center;margin:0 auto;}
</style>
<title>无标题文档</title>
<script type="text/javascript" src="http://www.maopiaopiao.com/js/jquery.min.js"></script>
<script type="text/javascript" src="./openbox.simple.js"></script>
<script type="text/javascript">
$(function(){
    $('.openbox').popWindow({
        title:'hello world'
    });
});
</script>
</head>
<body>
<div style="margin:230px auto;text-align:center;"><a href="#" type="" width="600" height="340" title="默认标题" url="feedback.html" class="openbox">点击我看效果</a></div>
<div id="test" style="margin-bottom:2000px;"></div>
</body>
</html>

jquery弹窗插件下载

标签: javascript html css

热门推荐