视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[总结]js弹出框、对话框、提示框、弹窗效果总结(3)

时间:2017-11-24 16:35酷播
四、弹出窗口实例演示 //1、最基本的弹出窗口代码 window.open('page.html') //2、经过设置后的弹出窗口 window.open('page.html','newwindow',' height = 100 , width = 400 , top = 0 , left = 0 , toolbar = no

四、弹出窗口实例演示

  1.  //1、最基本的弹出窗口代码   
  2.    
  3. window.open ('page.html')    
  4.    
  5.    
  6.   //2、经过设置后的弹出窗口   
  7.    
  8. window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //这句要写成一行   
  9.    
  10.     
  11. //参数解释：    
  12. //window.open 弹出新窗口的命令；    
  13. //'page.html' 弹出窗口的文件名；    
  14. //'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；    
  15. //height=100 窗口高度；    
  16. //width=400 窗口宽度；    
  17. //top=0 窗口距离屏幕上方的象素值；    
  18. //left=0 窗口距离屏幕左侧的象素值；    
  19. //toolbar=no 是否显示工具栏，yes为显示；    
  20. //menubar，scrollbars 表示菜单栏和滚动栏。    
  21. //resizable=no 是否允许改变窗口大小，yes为允许；    
  22. //location=no 是否显示地址栏，yes为允许；    
  23. //status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；    
  24.     
  25.   //3、用函数控制弹出窗口   
  26.    
  27. function openwin() {   
  28.     window.open("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //写成一行   
  29. }    
  30.   $(document).ready(fucntion(){   
  31.       openwin();   
  32.   });   
  33.    
  34. //这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？   
  35.    
  36. //方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；    
  37. //方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；    
  38. //方法三：用一个连接调用：    
  39. //<a href="#" onclick="openwin()">打开一个窗口</a>    
  40. //注意：使用的“#”是虚连接。    
  41. //方法四：用一个按钮调用：    
  42. //<input type="button" onclick="openwin()" value="打开窗口">    
  43.    
  44.   //4、同时弹出2个窗口    
  45.     
  46.     function openwin() {   
  47.         window.open("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no")//写成一行   
  48.         window.open("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//写成一行   
  49.     }    
  50.    
  51. //为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可 。最后用上面说过的四种方法调用即可。    
  52. //注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。   
  53.    
  54.   //5、主窗口打开文件1.htm，同时弹出小窗口page.html   
  55.    
  56.     function openwin() {   
  57.         window.open("page.html", "", "width=200,height=200")   
  58.     }     
  59.    
  60. //调用：<a href="1.htm" onclick="openwin()">open</a>   
  61.     
  62.   //6、弹出的窗口之定时关闭控制   
  63.     
  64. //下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段 代码加入弹出的页面(注意是加入page.html的HTML中，不是主页面中)，让它10秒后自动关闭是不是更酷了？   
  65.   //首先，将如下代码加入page.html文件的<head>区：    
  66.   function closeit() {   
  67.       setTimeout("self.close()", 10000) //毫秒    
  68.   }    
  69.   //页面加载完成调用关闭事件   
  70. $(document).ready(fucntion(){   
  71.       closeit();   
  72.   });   
  73.    
  74.   //7、在弹出窗口中加上一个关闭按钮   
  75.    
  76.   //<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>    
  77.    
  78.    
  79.   //8、内包含的弹出窗口-一个页面两个窗口   
  80.    
  81. //上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。   
  82.    
  83.     function openwin() {   
  84.         OpenWindow = window.open("", "newwin", "height=250, width=250,toolbar=no ,scrollbars=" + scroll + ",menubar=no");   
  85.         //写成一行    
  86.         OpenWindow.document.write("<TITLE>例子</TITLE>")   
  87.         OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")   
  88.         OpenWindow.document.write("<h1>Hello!</h1>")   
  89.         OpenWindow.document.write("New window opened!")   
  90.         OpenWindow.document.write("</BODY>")   
  91.         OpenWindow.document.write("</HTML>")   
  92.         OpenWindow.document.close()   
  93.     }    
  94.    
  95. //<a href="#" onclick="openwin()">打开一个窗口</a>    
  96. //<input type="button" onclick="openwin()" value="打开窗口">    
  97.    
  98.    
  99.   //9、终极应用--弹出的窗口之Cookie控制   
  100.    
  101. //回想一下，上面的弹出窗口虽然酷，但是有一点小毛病，比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，我们使用cookie来控制一下就可以了。   
  102. //首先，将如下代码加入主页面HTML的<HEAD>区：   
  103.    
  104.     function openwin() {   
  105.         window.open("page.html", "", "width=200,height=200")   
  106.     }   
  107.     function get_cookie(Name) {   
  108.         var search = Name + "="   
  109.         var returnvalue = "";   
  110.         if (document.cookie.length > 0) {   
  111.             offset = document.cookie.indexOf(search)   
  112.             if (offset != -1) {   
  113.                 offset += search.length   
  114.                 end = document.cookie.indexOf(";", offset);   
  115.                 if (end == -1)   
  116.                     end = document.cookie.length;   
  117.                 returnvalue = unescape(document.cookie.substring(offset, end))   
  118.             }   
  119.         }   
  120.         return returnvalue;   
  121.     }   
  122.     function loadpopup() {   
  123.         if (get_cookie('popped') == '') {   
  124.             openwin()   
  125.             document.cookie = "popped=yes"   
  126.         }   
  127.     }    
  128.    
  129. //然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！   

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器