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

如果有想法请告诉我,非常感谢,谢谢.

Answer 1

这个HTML很好:

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

您需要初始化Dialog(不确定您是否这样做):

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

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

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

然后，必须对其进行初始化：

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

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

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

Answer 4

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

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