Home > Article > Web Front-end > jquery pop-up masking layer effect [with example code]_jquery

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

PHP中文网Original: 2016-05-16 15:03:141158browse

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>

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)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The effect of widening when the mouse passes by jQuery (with demo source code)_jqueryNext article：The effect of widening when the mouse passes by jQuery (with demo source code)_jquery

See more

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

Related articles