jQuery的对话框弹出(jQuery dialog popup)

我试图让这个对话框弹出的形式展现出来点击该链接时，但它并没有为我工作。我一直对这个在过去的三个小时，这是越来越对我来说太令人沮丧。

这里是我的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

请让我知道，如果有一个想法，大加赞赏，感谢。

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

Answer 2:

你的问题是关于呼吁对话

如果你不初始化的对话框中，你不必通过“开放”为它显示：

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

此外，该代码需要在$(document).ready(); 正常运行或元件下面为它工作。

Answer 3:

使用下面的代码，它为我工作。

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

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' );

Answer 5:

您可以使用下面的脚本。它的工作对我来说

模态本身由一个主模态容器，报头，主体和页脚的。页脚包含的行动，在这种情况下是OK按钮，头保持标题和关闭按钮，并含有人体模态的内容。

 $(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