JavaScript基础教程_教你实战jquery弹出窗口插件(兼容所有浏览器)

作者：Comet 来源： Jquery特效点击数：1305发布时间： 2015-07-13 10:56:47

如何做好Jquery特效，要学习jquery弹出窗口插件(兼容所有浏览器)效果经常遇到网页的结果，需要跳出这个效果，那么从网上下载来研究下的一些流行音乐的影响，总觉得有些效果，但流行音乐很酷，但有很多问题，更有甚者，一个很长的名单堆桩，看着很头痛，然后根据自己的使用jQuery写一个流行效应和插件的形式提出的实际需求，有需要可以下载看看。猜您喜欢阅读>>JavaScript基础教程

JavaScript基础教程_教你实战jquery弹出窗口插件(兼容所有浏览器)

需要说明的是本例实现的比较粗糙，读者可以根据自己的实际情况做相应的修改，代码挺简单，看得懂jquery代码一定能看懂这个，下面主要说一下用法，该插件设置了如下几个参数：
'type' 弹窗里面的内容加载形式，目前只分为html url text三种，可选，默认为html形式。
'title' 弹窗标题，必须。
'url' 弹窗内容加载需要获取的内容的url地址，必须。
'prefix' 这里主要是为了防止css代码冲突而设置的，可选，默认为phpernote。
'width' 弹窗的宽度，必须。
'height' 弹窗的高度，必须。
'content' 当type设置为text的时候，弹窗里面需要显示的内容，可选，默认为空。
'cache' 弹窗内容加载是否允许缓存，可选，默认是false，不进行缓存。
下面看一个具体的实例，读者自己慢慢去体会吧。

01 <html>

02 <head>

`03`	`<meta` `http-equiv="Content-Type"` `content="text/html; charset=utf-8"` `/>`

`04`	`<style` `type="text/css">`

`05`	`#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}`

`06`	`#phpernote_window{position:absolute;background:#fff;z-index:102;color:#000000;border:0px solid #666}`

`07`	`#phpernote_nav{clear:both;height:30px;line-height:30px;background-color:#E8E8E8;padding:0 6px;border-bottom:1px solid #999;}`

`08`	`#phpernote_title{float:left;}`

`09`	`#phpernote_operat{float:right;}`

`10`	`#phpernote_content{text-align:center;margin:0 auto;}`

11 style>

`12`	`<title>无标题文档title>`

13 <body>

`14`	`<script` `type="text/javascript"` `src="./openbox.simple.js">script>`

`15`	`<script` `type="text/javascript">`

`16`	`$(function(){`

`17`	`$('.openbox').popWindow({`

`18`	`title:'hello world'`

19 });

20 });

21 script>

22 head>

23 <body>

`24`	`<div` `style="margin:230px auto;text-align:center;"><a` `href="#"` `type=""` `width="600"` `height="340"` `title="默认标题"` `url="feedback.html"` `class="openbox">点击我看效果a>div>`