jquery pop-up masking layer effect [with example code]

jquery pop-up masking layer effect [with example code]_jquery

PHP中文网

Release： 2016-05-16 15:03:14

Original

1157 people have browsed it

jquery pop-up masking layer effect [with example code]_jquery

I found a masking layer written by someone to improve it, and I think the effect is okay.

Rendering:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>tipswindown</title> 
  <link href="css/tipswindown.css" rel="stylesheet" type="text/css" /> 
  <script src="js/jquery-1.8.js" type="text/javascript"></script> 
  <script src="js/tipswindown.js" type="text/javascript"></script> 
  <style type="text/css"> 
    #main{width:300px;margin:50px auto;font-family: Arial, Calibri;} 
    #main .btn {width:150px;height:30px;line-height:30px;font-size:14px; vertical-align:middle; 
    color: #333333; font-weight:bold; text-decoration:none; display:block; text-align:center;background: #CCC;} 
    #main .btn:hover{vertical-align:middle; color: #fff; font-weight:bold; text-decoration:none;display:block;
     text-align:center;background: #333;} 
  </style> 
  <script type="text/javascript"> 
    $(function () { 
      $("#DialogShow").click(function () { 
        tipsWindown("CnBlogs", "id:dialog", "450", "200", "true", "", "true", "id"); 
      }); 
    }) 
    function Ok() { 
      window.location.href = "http://www.cnblogs.com/"; 
    } 
    function Cancel() { 
      $("#windownbg").remove(); 
      $("#windown-box").fadeOut("1000", function () { $(this).remove(); }); 
    } 
  </script> 
</head> 
<body> 
<div id="main"> 
  <a href="javascript:void(0);" class="btn" id="DialogShow">DialogShow</a> 
</div> 
<div id="dialog" style="display:none";> 
  <div class="dialogtext"> 
    <p>Please click on the ok button to go the http://www.cnblogs.com/ website and you should just wait. </p> 
    <p>If you are accessing this page by mistake please click on the cancel link.</p> 
　　</div> 
  <div class="dislogbtn"> 
    <a href="javascript:void(0);" class="btn" id="Ok" onclick="Ok()">Ok</a> 
    <a href="javascript:void(0);" class="btn" id="Cancel" onclick="Cancel()">Cancel</a> 
  </div> 
</div>   
</body>

Copy after login

The above is the content of jquery pop-up masking layer effect [with example code]_jquery. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!