【JQuery UI】对话框插件——dialog

最新推荐文章于 2025-05-31 11:02:14 发布

badlyForPapers

最新推荐文章于 2025-05-31 11:02:14 发布

阅读量808

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/happyhaojie/article/details/51087646

jQuery 专栏收录该内容

73 篇文章

订阅专栏

本文介绍如何利用jQuery对话框插件实现弹出多种类型的对话框，并提供了具体示例代码，包括如何设置对话框的样式及操作按钮等功能。

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

对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：

$(selector).dialog({options});

selector参数为显示弹出对话框的元素，通常为<div>，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

例子：调用对话框插件的dialog()方法，弹出询问对话框。

<span style="font-family:Times New Roman;font-size:14px;"><strong>    <body>
        <div id="divtest">
            <div class="content">
                <span id="spnName" class="fl">张三</span>
                <input id="btnDelete" type="button" value="删除"  class="fr"/>
            </div>
            <div id='dialog-modal'></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnDelete").bind("click", function () { //询问按钮事件
                    if ($("#spnName").html() != null) { //如果对象不为空
                        sys_Confirm("您真的要删除该条记录吗？");
                        return false; 
                    }
                });
            });
            function sys_Confirm(content) { //弹出询问信息窗口
                $("#dialog-modal").dialog({
                    height: 140,
                    modal: true,
                    title: '系统提示',
                    hide: 'slide',hide       当对话框关闭时的效果，默认为 null, 例如， hide: 'slide'
                    buttons: {
                        '确定': function () {
                            $("#spnName").remove();
                            $(this).dialog("close");
                        },
                        '取消': function () {
                            $(this).dialog("close");
                        }
                    },
                    open: function (event, ui) { 
                        $(this).html("");
                        $(this).append("<p>" + content + "</p>");
                    }
                });
            }
        </script>
    </body></strong></span>

需要补充几点：

1、 hide：为对话框关闭时的效果，默认为 null, 例如， hide: 'slide'。

hide效果有explode,fade,fold,highlight,pulsate,puff,scale,size,shake,slide。

2、open：function(){}为对话框打开时执行的函数。

3、return false：

在本例中是没作用的，因为input没有默认事件。
比如你把input那句换成：<a id="btnDelete" href="http://www.baidu.com" >删除</a>,
然后把return false去掉，你就看到不只是执行了函数里的事件，还跳转到了百度，这就触发了默认事件。

参考文献：http://blog.youkuaiyun.com/xue_feitian/article/details/6462105