解决jQuery 1.2.6无法动态创建dialog问题

最新推荐文章于 2019-10-20 13:43:17 发布

spring21st

最新推荐文章于 2019-10-20 13:43:17 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： dialog jquery div button firebug scroll

本文链接：https://blog.youkuaiyun.com/spring21st/article/details/5356806

jQuery 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了如何解决在动态创建的div上使用jQuery 1.2.6版本时出现的dialog()未定义错误，并提供了正确的div插入位置及样式示例。

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

在jQuery 1.2.6 中，如果我们动态创建一个div，用于弹出自定义dialog，会出现"dialog()未定义"的错误，自然而言的，创建出的层也是无法弹出dialog对话框的。

通过直接在页面定义一个div，使用jQuery调用dialog() 方法。使用firebug 查看页面元素，发现 dialog 是通过css 样式表控制实现的，ui.dialog 会创建两个div，其中第一个用于实现overlay 背景效果；而原来HTML页面定义的div 则包含在calss ="ui-dialog" 的div层中。

所以，如果想动态创建div，实现dialog的效果，这个div 就必须append到body的下面。

var divDialog; function getDivDialog() { if (divDialog != null) { divDialog.remove(); } divDialog = document.createElement("div"); $("body").append(divDialog); return divDialog; }

PS: dialog 样式表：

div.ui-dialog-overlay { background-color: #efefef; } div.ui-dialog { border: 1px solid #cfcfcf; background-color: #ffffff; } div.ui-dialog div.ui-dialog-container { } div.ui-dialog div.ui-dialog-container div.ui-dialog-titlebar { background-color: #efefef; border: 1px solid #AAAAAA; height: 20px; padding: 5px 5px 5px 0px; background:#CCCCCC url(images/jquery.ui.1.7/ui-bg_highlight-soft_75_cccccc_1x100.png) repeat-x scroll 50% 50%; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; margin:2px 2px 0px 2px; } div.ui-dialog div.ui-dialog-container div.ui-dialog-titlebar span.ui-dialog-title { display: block; width: 90%; float: left; font-weight: bold; padding: 5px; } div.ui-dialog div.ui-dialog-container div.ui-dialog-titlebar a.ui-dialog-titlebar-close { float: right; color: Black; font-size:10pt; font-weight:bold; font-family:Verdana; } div.ui-dialog div.ui-dialog-container div.ui-dialog-titlebar a.ui-dialog-titlebar-close-hover { border-color: #cfcfcf; border: 1px solid #efefef; } div.ui-dialog div.ui-dialog-container div.ui-dialog-content { margin: 5px; white-space: normal; background-repeat: no-repeat; background-position: 1% 1%; } div.ui-dialog div.ui-dialog-buttonpane { text-align: right; width: 95%; margin: 5px; } div.ui-dialog div.ui-dialog-buttonpane button { margin-left: 5px; height:21px; border: 1px solid #cfcfcf; background:url(images/button-bg.jpg); padding: 0px 5px 0px 5px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; } div.ui-dialog div.ui-dialog-buttonpane button:hover { border-color: #eeeeee; } div.ui-dialog div.ui-dialog-buttonpane button.hover { border-color: #eeeeee; }

另外，务必注意的是：同一个页面不要引用两次jquery.1.2.6.js !