用jquery中插件dialog实现弹框效果实例代码

网络编程发布日期：2024/10/10 浏览次数：1

正在浏览：用jquery中插件dialog实现弹框效果实例代码

复制代码代码如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹框遮罩效果</title>
<style type="text/css">
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
<script type="text/javascript" language="javascript" src="/UploadFiles/2021-04-02/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="/UploadFiles/2021-04-02/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" language="javascript">
$(function(){
    $("#dialog").dialog({
        autoOpen:false,
        buttons:[{
            text:"ok",
            click:function(){
                $("#dialog").dialog("close");
                }
            },
            {
            text:"cancal",
            click:function(){
                $("#dialog").dialog("close");
                }
            }
            ],
            position:"top",//弹出位置
            width:600, //窗口宽度
            height:200,
            drag:function(){
                alert("你干拽我试试");
                }


        });
    $("#dialog_link").click(function(){
        $("#dialog").dialog("open");
        });
    })
</script>
</head>

<body>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>

<div id="dialog" title="Hi" style="display:none">
hello
</div>
</body>
</html>

});
$("#dialog_link").click(function(){
$("#dialog").dialog("open");
});
})
</script>
</head>

<body>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>

<div id="dialog" title="Hi" style="display:none">
hello
</div>
</body>
</html>

上一篇：jquery中插件实现自动添加用户的具体代码

下一篇：javascript禁制后退键(Backspace)实例代码

一句话新闻

高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布

高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。