- <!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>jQuery - Start Animation</title>
- <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js" ></script>
- <script type="text/javascript">
- $(document).ready(function()
- {
- // animation speed
- var speed = 500;
- //bind event handler
- $("#btnShow").click(function(event)
- {
- // cancel event bubbling
- event.stopPropagation();
- //Set the popup layer position
- var offset = $(event.target).offset();
- $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
- //animation display
- $("#divPop").show(speed);
- });
- //Click the blank area to hide the popup layer
- $(document).click(function(event) { $("#divPop").hide(speed) });
- //Click the popup layer to hide itself
- $("#divPop").click(function(event) { $("#divPop").hide(speed) });
- });
- </script>
- </head>
- <body>
- <div>
- <br /><br /><br />
- < button id= "btnShow" >Show prompt text </ button >
- </div>
- <!-- Popup layer -->
- <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;
- width: 300px; height: 100px;">
- < div style= "text-align: center;" >Popup layer </ div >
- </div>
- </body>
- </html>
jquery popup
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325721661&siteId=291194637
Recommended
Ranking