jquery彈出框
阿新 • • 發佈：2018-05-08
pos AD hid doctype play pan start nbsp position
- <!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()
- {
- //動畫速度
- var speed = 500;
- //綁定事件處理
- $("#btnShow").click(function(event)
- {
- //取消事件冒泡
- event.stopPropagation();
- //設置彈出層位置
- var offset = $(event.target).offset();
- $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
- //動畫顯示
- $("#divPop").show(speed);
- });
- //單擊空白區域隱藏彈出層
- $(document).click(function(event) { $("#divPop").hide(speed) });
- //單擊彈出層則自身隱藏
- $("#divPop").click(function(event) { $("#divPop").hide(speed) });
- });
- </script>
- </head>
- <body>
- <div>
- <br /><br /><br />
- <button id="btnShow">顯示提示文字</button>
- </div>
- <!-- 彈出層 -->
- <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;
- width: 300px; height: 100px;">
- <div style="text-align: center;" >彈出層</div>
- </div>
- </body>
- </html>
jquery彈出框