示例完整代码如下:
<%@ Page Language="C#" %> <!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 id="Head1" runat="server"> <title>jQuery UI - 弹出层应用实例 Dialog</title> <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--> <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src=https://www.jb51.net/article/"<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js" type=https://www.jb51.net/article/"text/javascript"></script> <% if (false) {%><script src=https://www.jb51.net/article/"~/js/jquery-vsdoc-lastest.js" type=https://www.jb51.net/article/"text/javascript"></script> <% }%> <script type=https://www.jb51.net/article/"text/javascript"> /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/ </script> <style type=https://www.jb51.net/article/"text/css"> </style> </head> <body> <!-- Demo 静态提示类弹出层 --> <div class=https://www.jb51.net/article/"ui-widget ui-widget-content ui-corner-all" style=https://www.jb51.net/article/"width: 700px; padding: 5px;"> <h3>Demo. 共享同一个静态弹出层, 弹出层内容固定: </h3> <div> <span id=https://www.jb51.net/article/"spanShowTip1">显示提示</span> <span id=https://www.jb51.net/article/"spanShowTip2">显示提示</span> <span id=https://www.jb51.net/article/"spanShowTip3">显示提示</span> <span id=https://www.jb51.net/article/"spanShowTip4">显示提示</span> </div> </div> <br /> <br /> <!-- Demo 动态提示类弹出层 --> <div class=https://www.jb51.net/article/"ui-widget ui-widget-content ui-corner-all" style=https://www.jb51.net/article/"width: 700px; padding: 5px;"> <h3>Demo. 每个弹出层内容不同, 弹出层内容存储在事件源的元素属性中: </h3> <div> <span id=https://www.jb51.net/article/"spanShowDataTip1" data=https://www.jb51.net/article/"颜色是红色">红色</span> <span id=https://www.jb51.net/article/"spanShowDataTip2" data=https://www.jb51.net/article/"颜色是绿色">绿色</span> </div> </div> <br /> <br /> <!-- Demo 遮罩类弹出层 --> <div class=https://www.jb51.net/article/"ui-widget ui-widget-content ui-corner-all" style=https://www.jb51.net/article/"width: 700px; padding: 5px;"> <h3>Demo. 弹出IFrame </h3> <div> <input type=https://www.jb51.net/article/"button" id=https://www.jb51.net/article/"btnShowIframe" name=https://www.jb51.net/article/"btnShowIframe" value=https://www.jb51.net/article/"显示弹出层"/> </div> </div> <!-- 提示类弹出层 --> <div id=https://www.jb51.net/article/"divTip" title=https://www.jb51.net/article/"自定义标题"> <p>弹出层</p> </div> <!-- 遮罩类弹出层 --> <div id=https://www.jb51.net/article/"divIframe" title=https://www.jb51.net/article/"iFrame弹出层" style=https://www.jb51.net/article/"text-align:center;"> <iframe src=https://www.jb51.net/article/"http://www.elong.com" width=https://www.jb51.net/article/"450px" height=https://www.jb51.net/article/"230px"></iframe> </div> <script type=https://www.jb51.net/article/"text/javascript"> /*==========用户自定义方法==========*/ /*==========事件绑定==========*/ $(function() { //静态提示类弹出层 $("span[id^=spanShowTip]").css("cursor", "pointer").click(function(event) { $("*").stop(); event.stopPropagation(); var top = $(event.target).offset().top + 20; var left = $(event.target).offset().left; $("#divTip").dialog("option", "position", [left, top]); $("#divTip").dialog("open"); }); //动态提出类弹出层 $("span[id^=spanShowDataTip]").css("cursor", "pointer").click(function(event) { $("*").stop(); $("#divTip").dialog("close"); event.stopPropagation(); var top = $(event.target).offset().top + 20; var left = $(event.target).offset().left; $("#divTip").html($(event.target).attr("data")); $("#divTip").dialog("option", "position", [left, top]); $("#divTip").dialog("open"); }); //遮罩类弹出层 $("#btnShowIframe").click(function(event) { event.preventDefault(); event.stopPropagation(); $("#divIframe").dialog("open"); }); //单击自身取消冒泡 $("#divTip, #divIframe").bind("click", function(event) { event.stopPropagation(); }); //document对象单击隐藏所有弹出层 $(document).bind("click", function(event) { $("#divTip").dialog("close"); $("#divIframe").dialog("close"); }); }); /*==========加载时执行的语句==========*/ $(function() { //初始化提示类弹出层 $("#divTip").dialog({ show: null, bgiframe: false, autoOpen: false }); //初始化遮罩类弹出层 $("#divIframe").dialog({ show: null, bgiframe: false, autoOpen: false, width: 500, height: 300, draggable: true, resizable: false, modal: true }); }); </script> </body> </html>
效果如图:
静态提示类弹出层