Jquery对话窗口不能正确呈现

当我在我的页面上包含我的jQuery对话框div时，对话框的html标记呈现在页面底部，而不是在用户触发打开事件之前隐藏。另外，我的页面的其余部分不会加载。Jquery对话窗口不能正确呈现

这里是我的对话框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对话框，它工作得非常好.. ..被隐藏，直到用户点击链接触发对话框。

完全卡在这个。感谢任何帮助！谢谢。

来源

2011-05-19 FarazQ

应该

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

真的

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

或者......

，如果你刚才把style="display: none;"内联，而不是担心使用jQuery改变，因为这是你想要的默认无论如何？

来源

2011-05-19 04:16:45

嗨斯科特 - ＃提醒是为表单验证。我试图把内联的CSS不显示对话框 - 这是做，但页面的其余部分不呈现。不知何故启动页面其余部分的执行...是我的猜测..？ – FarazQ 2011-05-19 17:33:21

我假设你正在使用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用户界面演示页：http://jqueryui.com/demos/dialog/#modal

快乐编码！

来源

2011-05-19 05:19:40 Jonathan

嗨乔纳森 - 感谢您的详细回复。我在同一页面上使用了不同的jquery对话框，它工作正常。所以，我相信JS文件是正确链接的。看起来好像在控制台中抛出了一些错误，所以我认为这是我应该开始的地方。我还没有使用过萤火虫或镀铬控制台调试器（新手！）...但是发现了一些关于如何使用该工具的资源...所以会这样做并更新你们。 thx再次。 – FarazQ 2011-05-19 18:01:09

我在我的文件的第1行错误控制台中得到了这个。但是没有任何东西。我的doctype声明从第3行开始1Uncaught SyntaxError：意外的令牌） – FarazQ 2011-05-19 19:13:24

假设你使用jQuery UI则是建立在刚刚修改div来这是一个伟大的助手CSS类：

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

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

来源

2011-05-19 05:24:33

Alexander - 好的提示，thx。这确实隐藏了页面加载时的对话框，但不幸的是，在用户点击时不会打开对话框...并且页面的其余部分（例如页脚div）不呈现。所以基本上它退出时，我包括这个div - 不知道为什么和在哪里。任何人都有其他想法？正如你可以告诉我是一个新的开发人员:) – FarazQ 2011-05-19 17:29:55

好的，我发现了有问题的一段代码。结果没有什么可做的w/JS/jQuery。在我的对话窗口中，我有这个代码为我的输入字段检索数据。我把这段代码注释掉了。一旦我删除了这个，对话窗口完美地工作。仍然不知道为什么这会导致问题，但这里是代码：

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

我很感谢大家的帮助！

来源

2011-05-19 20:35:27 FarazQ

即使你可能有这个评论了浏览器呈现，服务器仍然解析的PHP代码，所以你可能有一个错误，导致错误，并打破对话框。你必须注释掉php代码，所以它变成：'<！ - <？php // $ em = getAllEm（）？> - >' – 2012-02-21 01:59:16

Jquery对话窗口不能正确呈现

回答

相关问题