jQuery 对话框弹出答案

【问题标题】：jQuery dialog popupjQuery 对话框弹出
【发布时间】：2012-06-07 16:28:21
【问题描述】：

我正在尝试在单击此链接时显示此对话框弹出表单，但它对我不起作用。过去三个小时我一直在做这件事，这对我来说太令人沮丧了。

这是我的 HTML：

<a href="#" id="contactUs">Contact Us</a>
<div id="dialog" title="Contact form">
  <p>appear now</p>
</div>

这是我的 JavaScript，它在一个外部文件中：

$("#contactUs").click(function() {
  $("#dialog").dialog("open");
  return false;
});

我已经使用了这些链接，但对我没有用：

如果有想法请告诉我，非常感谢，谢谢。

【问题讨论】：

没有错误？没有奇怪的视觉动作？什么都没有？
如果你有兴趣，我有一个让 jQuery 对话框更简单的插件：mostthingsweb.com/2011/12/dialogwrapper-2-1-released
啊抱歉，基本上，错误是弹出窗口根本没有出现。谢谢你的链接，我现在就去看看。
在jsfiddle.net 上进行演示怎么样？下面的答案应该有效，所以有些事情你没有告诉我们。
我知道这有点旧，但是您的代码没有引用 jQuery UI js 和 css 文件。此外，您缺少代码引用以创建菜单的 navBar 元素。

标签： jquery jquery-ui modal-dialog jquery-ui-dialog

【解决方案1】：

您可以使用以下脚本。它对我有用

模态本身由主模态容器、页眉、正文和页脚组成。页脚包含操作，在本例中为确定按钮，页眉包含标题和关闭按钮，正文包含模式内容。

 $(function () {
        modalPosition();
        $(window).resize(function () {
            modalPosition();
        });
        $('.openModal').click(function (e) {
            $('.modal, .modal-backdrop').fadeIn('fast');
            e.preventDefault();
        });
        $('.close-modal').click(function (e) {
            $('.modal, .modal-backdrop').fadeOut('fast');
        });
    });
    function modalPosition() {
        var width = $('.modal').width();
        var pageWidth = $(window).width();
        var x = (pageWidth / 2) - (width / 2);
        $('.modal').css({ left: x + "px" });
    }

参考：-Modal popup using jquery in asp.net

【讨论】：

【解决方案2】：

这个 HTML 很好：

<a href="#" id="contactUs">Contact Us</a>                   
<div id="dialog" title="Contact form">
  <p>appear now</p>
</div>

你需要初始化对话框（不确定你是否这样做）：

$(function() {
  // this initializes the dialog (and uses some common options that I do)
  $("#dialog").dialog({
    autoOpen : false, modal : true, show : "blind", hide : "blind"
  });

  // next add the onclick handler
  $("#contactUs").click(function() {
    $("#dialog").dialog("open");
    return false;
  });
});

【讨论】：

谢谢，这有帮助，但是对话框仍然没有显示给我。我会尝试更多地环顾四周。

【解决方案3】：

使用下面的代码，它对我有用。

<script type="text/javascript">
     $(document).ready(function () {
            $('#dialog').dialog({
                autoOpen: false,
                title: 'Basic Dialog'
            });
            $('#contactUs').click(function () {
                $('#dialog').dialog('open');
            });
        });
</script>

【讨论】：

【解决方案4】：

很简单，首先要添加HTML：

<div id="dialog"></div>

那么，它必须被初始化：

<script type="text/javascript">
  jQuery( document ).ready( function() {
    jQuery( '#dialog' ).dialog( { 'autoOpen': false } );
  });
</script>

之后你可以通过代码来展示它：

jQuery( '#dialog' ).dialog( 'open' );

【讨论】：

【解决方案5】：

您可以查看此链接： http://jqueryui.com/dialog/

这段代码应该可以正常工作

$("#dialog").dialog();

【讨论】：

【解决方案6】：

您的问题在于对话框调用

如果您不初始化对话框，则不必传递“打开”即可显示：

$("#dialog").dialog();

此外，此代码需要位于 $(document).ready(); 函数上或位于元素下方才能正常工作。

【讨论】：

谢谢。我在没有通过开放的情况下尝试过，但仍然对我不起作用。另外，我没有发布 ready 事件，但它存在于文档中。