jQuery对话框弹出窗口

Question

我想让这个弹出对话框在点击链接时显示，但它对我没有起作用。 我已经花了三个小时来解决这个问题，这让我感到非常沮丧。

这是我的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;
});

我使用了这些链接，但对我来说都没有用：

• http://jqueryui.com/demos/dialog/#modal
• http://jqueryui.com/demos/dialog/#default

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

- rj2700

---

没有错误？没有奇怪的视觉动作？什么都没有？ - Zuul

啊，抱歉，基本上，错误在于弹出窗口根本没有显示出来。感谢提供链接，我现在会去查看一下。 - rj2700

那是一个非常酷的网站，谢谢分享。无论如何，这是我的链接：http://jsfiddle.net/CXgv9/。 - rj2700

我知道这有点过时了，但是您的代码没有引用jQuery UI js和css文件。此外，您缺少navBar元素，您的代码需要该元素来创建菜单。 - Ricardo Souza

我曾经遇到过同样的问题，后来发现我导入了两个不同版本的jQuery。当我移除第二个版本时，一切都按预期工作了。也许这可以帮助其他人。 - BWP

Answer 1

这个 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;
  });
});

- Andy Jones

---

谢谢，这很有帮助，但是对我来说对话框仍然没有显示出来。我会尝试再找找看。 - rj2700

Answer 2

您的问题出在对话框调用上。 如果您不初始化对话框，您不必传递"open"参数来显示它：

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

此外，此代码需要放在$(document).ready();函数中或者放在元素下面才能正常工作。

- Ricardo Souza

---

谢谢。我尝试了不传递open，但对我仍然不起作用。此外，我没有发布ready事件，但它存在于文档中。 - rj2700

Answer 3

使用以下代码，对我有效。

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

- Mohit Sharma

Answer 4

很简单，首先必须添加 HTML 代码：

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

接下来，它必须被初始化：

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

之后，您可以通过代码显示它：

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

- Michael Martin

Answer 5

您可以使用以下脚本。对我来说很有效。

模态框本身由一个主模态容器、一个标题、一个正文和一个页脚组成。页脚包含操作，这种情况下是“确定”按钮，标题包含标题和关闭按钮，正文包含模态内容。

 $(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" });
    }

参考：- 使用jQuery在ASP.NET中实现模态弹出窗口

- Rameshbl

Answer 6

你可以查看这个链接： http://jqueryui.com/dialog/ 这段代码应该可以正常工作。

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

- Krishna