Jquery UI 之dialog

最新推荐文章于 2025-08-22 19:33:51 发布

weixin_30917213

最新推荐文章于 2025-08-22 19:33:51 发布

阅读量47

点赞数

CC 4.0 BY-SA版权

文章标签： ui xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/jhxk/articles/2633365.html

本文介绍了一个使用jQuery UI模态对话框来展示网站服务条款的方法。通过简单的JavaScript代码实现了对话框的打开与关闭功能，并设置了两个按钮供用户选择是否同意条款。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
    *{
        font-size:12px;
    }
</style>
<link rel="stylesheet" type="text/css" href="jQueryUI/jquery.ui.all.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Images/jquery-ui-1.8.5.min.js"></script>

<script type="text/javascript">

        $(document).ready(function(){

                    //设置使用模态对话框,不自动打开对话框,对话框设置2按钮并绑定关闭事件
                    $(".content").dialog({model:true,width:600,height:260,autoOpen:false,buttons:
                    {
                        "同意":function(){$(this).dialog('close');},
                        "取消":function(){$(this).dialog('close');}
                    }
                });


                 //打开
                 $('#btnOpen').click(function() {
                    $('.content').dialog('open');
                 }) ;

                 //关闭
                 $('#btnClose').click(function() {
                    $('.content').dialog('close');
                 }) ;


            });

</script>
</head>

<body>
   <div class="content">
        <h1>网站服务条款</h1>
        <span id="text">
            <p>
                欢迎您加入本站点参加交流和讨论，为维护网上公共秩序和社会稳定，请您自觉遵守以下条款： <br />   <br />
                1、服务条款的确认和接纳<br />
                2、服务简介<br />
                3、服务条款的修改<br />
                4、服务修订<br />
                5、用户隐私制度<br /> <br />
            </p>
        </span>
    </div>

    <input type="button" id="btnOpen" value="打开" />
    <input type="button" id="btnClose" value="关闭" />
</body>
</html>

转载于:https://www.cnblogs.com/jhxk/articles/2633365.html