Question

当我在页面上包含我的jquery对话框div时，对话框的html标记呈现在页面底部而不是隐藏，直到用户触发open事件。此外，我的页面的其余部分不会加载。

这是我的对话框div的代码：

    <div id="photoAdd_dialog" title="Upload Photos">
    <form name="photoInfo_form" action="" method="post" id="photoInfo_form">
       ...html markup for several input fields...
     </form>
   </div>

   <script type="text/javascript">
   $(document).ready(function(){
 $("#photoAdd_dialog").dialog(
               {autoOpen: false,
                   width: 400,
                   resizable: false,
                   modal: true}
 );
 //end of the dialog setting
 $("#reminder").css("display","none");

 });
//end of preload
    .... form validation javascript here
 </script>

我做了什么：

确保jquery css和js文件是最新的并指向正确的位置
在此页面上包含一个不同的jquery对话框，它工作得非常好......。隐藏，直到用户单击链接以触发对话框。

完全坚持这一点。感谢任何帮助！感谢。

Answer 1

我假设您正在使用jQuery UI进行对话？ JS文件是否正确链接？

其次，如果您的页面未加载AT ALL，则可能会抛出错误。使用Chrome开发工具或Firebug查看JS控制台输出。

你在哪里触发对话框打开？

初始化对话框所需的只是：

//Auto opens by default
$("#photoAdd_dialog").dialog()

//To open the dialog
$("#photoAdd_dialog").dialog('open')

//To close the dialog
$("#photoAdd_dialog").dialog('close')

jQuery应该在初始化后隐藏对话框，因此您不需要CSS操作。

总而言之，我会这样做：

//link to JS files here

<script type="text/javascript">
    $(document).ready(function(){
        $("#photoAdd_dialog").dialog(
        {
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true,
            title: "Upload Photos",
        });
    });
</script>

<script type="text/javascript">
    $(".opener").onClick(function(e){
        //stops the click from changing the page and whatever other default action would happen.
        e.preventDefault();
        $("#photoAdd_dialog").dialog('open');
    });

    $(".closer").onClick(function(e){
        //stops the click from changing the page and whatever other default action would happen.
        e.preventDefault();
        $("#photoAdd_dialog").dialog('close');
    });
</script>

//头部和身体开始

<div id="photoAdd_dialog">
    ...html markup for several input fields...
</div>

//I prefer classes, since IDs tie up namespace.  Not totally relevant for a small JS application though.
<a href="#" class="opener">Open Photo Add Dialog</a>

<a href="#" class="closer">Close Photo Add Dialog</a>

请务必查看jQuery UI演示页面：http://jqueryui.com/demos/dialog/#modal

快乐的编码！

Answer 2

应该

$("#reminder").css("display","none");

真的是

$("#photoAdd_dialog").css("display","none");

或......

如果您只是将style="display: none;"内联并且不担心使用jQuery进行更改会怎么样？因为这是您想要的默认值？

Answer 3

假设您正在使用jQuery UI，那么内置一个很棒的帮助程序css类，只需将div修改为：

<div id="photoAdd_dialog" title="Upload Photos" class="ui-helper-hidden">

ALl这样做是通过css中的类应用display:none。这很好，因为它保留了内联样式语句，尽管许多人认为style="display:none;"没问题，这取决于你与谁交谈。

Answer 4

好的，我找到了令人讨厌的代码。原来没什么可做的/ JS / jquery。在我的对话框窗口中，我有这个代码，它正在检索输入字段的数据。我把这段代码注释掉了。删除后，对话框窗口完美运行。仍然不知道为什么会导致这个问题，但这里是代码：

               <!-- <?php $em=getAllEm();?> 
<?php foreach($em as $e):?>
    <option value="<?=$e[0]?>"><?php echo $e[1];?></option>
<?php endforeach;?> -->

感谢大家的帮助！

Jquery对话框窗口无法正确呈现

4 个答案: