Question

由于某些原因，我的forsaledialog div 正在加载页面，而不是等待jQuery显示它。虽然在jsFiddle中工作正常！

jsFiddle链接：http://jsfiddle.net/YDdqP/269/

<div id="forsalejoepopupbutton" >
<span>For Sale</span>
</div>
<div id="forsaledialog" title="For Sale">
  this div is not hiding when the page loads!!!!!!!!!!!!!!
  i really want a php file here but since it always loads i cant include! what is going on??
</div>
    $(function () {
    $("#forsaledialog").dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 500
        },
        hide: {
            effect: "explode",
            duration: 2000
        }
    });
    $("#forsalejoepopupbutton").click(function () {
        $("#forsaledialog").dialog("open");
    });
});


EDIT: THIS IS WHAT FIXED IT:
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Answer 1

尝试$(window).load(function() {

当完整页面出现时，窗口加载事件会稍后执行满载，包括所有帧，对象和图像。因此应放置与图像或其他页面内容有关的功能在窗口或内容标记本身的加载事件中。

$(window).load(function () {
    $("#forsaledialog").dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 500
        },
        hide: {
            effect: "explode",
            duration: 2000
        }
    });
    $("#forsalebutton").click(function () {
        $("#forsaledialog").dialog("open");
    });
});

<小时/> 在OP的评论

之后更新

您尚未在该页面中包含jQuery ui库。

Answer 2

我很有可能错过了某些内容，但为什么不将其设置为display:none或display:hidden，然后在加载所需内容后使用JavaScript更改显示属性。

使用

document.getElementById('myDiv').style.display = 'block';

您在onclick或onpageload或您想要的任何其他类型的事件中调用的函数内部。

Answer 3

使用css“display：none;”隐藏div

和

$("#forsalejoepopupbutton").click(function () {
        $("#forsaledialog").style.display="block";
    });

再次展示

我的div一直在显示，而不是在点击事件后加载？

3 个答案: