jquery ui 实现的登录框

最新推荐文章于 2025-12-20 13:29:58 发布

原创最新推荐文章于 2025-12-20 13:29:58 发布 · 3.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #ui #function #div #iframe

JQuery ui+net 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用 jQuery UI 实现的弹出层应用案例，包括静态提示类、动态提示类及遮罩类弹出层。通过绑定点击事件展示不同类型的弹出层，并演示了如何设置位置、内容等属性。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="jQuery_jquery_ui_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title>jQuery UI - 弹出层应用实例 Dialog</title>
    
    <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui.css" />

        /*==========事件绑定==========*/
        $(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>