插件代码
1 (function ($) { 2 $.fn.extend({ 3 "diatext": function (text,diatime) { 4 $('<div class="diawin">' + '<p>'+text+'</p>'+'</div>'+'<div class="diabg">'+'</div>').appendTo('body'); 5 $(window).on('resize',function(){diapos()}); 6 function diapos(){ 7 var winWidth=$(window).width(); 8 var winHeight=$(window).height(); 9 var diaW=$('.diawin').outerWidth(true); 10 var diaH=$('.diawin').outerHeight(true); 11 var diaLeft= (winWidth-diaW)/2; 12 diaLeft=diaLeft <0 ? 0: diaLeft; 13 var diaTop=(winHeight - diaH) /2; 14 diaTop = diaTop <0 ? 0:diaTop; 15 $('.diawin').css({left:diaLeft,top:diaTop}); 16 }; 17 diapos(); 18 var timehide=1000||diatime; 19 if(diatime!=undefined){ 20 timehide=diatime; 21 } 22 $('.diabg').click(function(){ 23 $('.diawin,.diabg').remove(); 24 }) 25 var timer=setTimeout(function(){ 26 $('.diawin,.diabg').remove(); 27 },timehide); 28 function diashow(){ 29 $('.diawin,.diabg').show(); 30 setTimeout(function(){ 31 $('.diawin,.diabg').remove(); 32 },timehide); 33 }; 34 diashow(); 35 clearTimeout(timer); 36 } 37 38 39 }); 40 })(jQuery);
html文件代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title></title> 7 <!-- <script src="jquery.js" type="text/javascript" ></script> --> 8 <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- //在线引用地址 --> 9 <script src="dialog.js" charset="utf-8" ></script> //引用弹窗插件 10 <script type="text/javascript"> 11 $(function(){ 12 $('p').diatext('niniininidsafklajlk',5000); 13 }); 14 15 </script> 16 <style type="text/css" media="screen"> //弹窗样式 17 .diawin{width: 400px; padding: 20px; border-radius: 5px; background: #fff;border:1px solid #ccc; position:absolute; z-index: 101; display: none;} 18 .diawin p{color:#333; font-size: 14px;} 19 .diabg{background:rgba(0,0,0, 0.5); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100; display: none;} 20 </style> 21 </head> 22 <body> 23 <p>hello world</p> 24 25 </body> 26 27 </html>