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

    作者:Comet更新于: 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>
    25 <div id="test" style="margin-bottom:2000px;">div>
    26 body>
    27 html>
      html>

    学完以上Jquery特效知识的编程语言,线下可多实践多操作才能慢慢体会。想了解更多 JavaScript基础教程视频教程可在线学习观看!
javascript 更多推荐

课课家教育

未登录