jquery ui 实现的登录框

最新推荐文章于 2024-07-15 11:35:55 发布

Dylan_Gong

最新推荐文章于 2024-07-15 11:35:55 发布

阅读量3.5k

点赞数

分类专栏： JQuery ui+net 文章标签： jquery ui function div iframe stylesheet

本文链接：https://blog.csdn.net/Dylan_Gong/article/details/4205756

版权

JQuery ui+net 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ 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>

Dylan_Gong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery ui 实现的登录框

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> jQuery UI - 弹出层应用实例 Dialog /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/
复制链接

扫一扫

专栏目录