Jquery页面加载完成自动触发按钮点击事件
主要应用到jquery的trigger()方法，trigger() 方法触发被选元素的指定事件类型。
语法：$(selector).trigger(event,[param1,param2,...])
1、具体用法
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>弹出层</title> 6 <script type="text/javascript" src="http://www.h5.qh.chinamobile.com/activityPlatform/resource/scripts/jquery-1.7.1.min.js"></script> 7 <style> 8 .black_overlay{ 9 display: none; 10 position: absolute; 11 top: 0%; 12 left: 0%; 13 width: 100%; 14 height: 100%; 15 background-color: black; 16 z-index:1001; 17 -moz-opacity: 0.8; 18 opacity:.80; 19 filter: alpha(opacity=80); 20 } 21 .white_content { 22 display: none; 23 position: absolute; 24 top: 10%; 25 left: 10%; 26 width: 80%; 27 height: 80%; 28 border: 16px solid lightblue; 29 background-color: white; 30 z-index:1002; 31 overflow: auto; 32 } 33 .white_content_small { 34 display: none; 35 position: absolute; 36 top: 20%; 37 left: 30%; 38 width: 40%; 39 height: 50%; 40 border: 16px solid lightblue; 41 background-color: white; 42 z-index:1002; 43 overflow: auto; 44 } 45 </style> 46 <script type="text/javascript"> 47 //弹出隐藏层 48 function ShowDiv(show_div,bg_div){ 49 document.getElementById(show_div).style.display='block'; 50 document.getElementById(bg_div).style.display='block' ; 51 var bgdiv = document.getElementById(bg_div); 52 bgdiv.style.width = document.body.scrollWidth; 53 // bgdiv.style.height = $(document).height(); 54 $("#"+bg_div).height($(document).height()); 55 }; 56 //关闭弹出层 57 function CloseDiv(show_div,bg_div) 58 { 59 document.getElementById(show_div).style.display='none'; 60 document.getElementById(bg_div).style.display='none'; 61 }; 62 63 /** 64 * 虚拟点击按钮事件 65 */ 66 function btnClick() { 67 $('#Button1').trigger('click'); 68 } 69 $(function() { 70 window.onload = btnClick;//页面加载完执行模拟点击事件 71 72 $('#Button1').on('click',function() {//点击按钮事件展示弹框 73 ShowDiv('MyDiv','fade'); 74 }); 75 }); 76 </script> 77 </head> 78 <body> 79 <input id="Button1" type="button" value="点击弹出层" /> 80 <!--弹出层时背景层DIV--> 81 <div id="fade" class="black_overlay"> 82 </div> 83 <div id="MyDiv" class="white_content"> 84 <div style="text-align: right; cursor: default; height: 40px;"> 85 <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span> 86 </div> 87 我的奖品弹框 88 </div> 89 </body> 90 </html>
2、刷新页面即可实现按钮自动点击效果
需要注意的是:
window.onload = btnClick;//页面加载完执行模拟点击事件,btnClick不能写为btnClick();