Question

我有一个简单的结构（在一个复杂的页面，但好吧）我有一个div使用tas容器的一些ajax答案显示必要时使用colorbox

<div style = "display: none;">
<div id="modal"></div>
</div>

以下脚本（部分）

$.colorbox({
    onOpen: function() {
        $("#modal").html("Attendere prego...");
    $("#modal").fadeIn;
    },
    onClose: function() {
        $("#modal").html("Attendere prego...");
        $("#modal").fadeOut;
    },
    inline: true,
    href: "#modal",
    close: "Chiudi",
    transition: "fade",
    opacity: 0.6,
    width: "600px",
    height: "100px",
    maxWidth: "500px",
    maxHeight: "500px",
});

之后我有一个ajax调用，我把#modal放在#modal里面（一个html片段）。

如果我加载页面我单击模式打开并显示数据或消息如果为空，然后我calose，如果我再次点击没有任何事情发生...我用chrome的工具调查DOM，发现在第一次使用后的previus html成了：

<div style="display: none;">
    <div style="display: none;"></div>
</div>

我经常使用彩盒，我不记得像这样的其他情况，我无法以任何方式解决它，

Answer 1

你可以这样：

HTML中的

：

<div id="modal" style="display:none">
</div>

和你的剧本：

$.colorbox({
    onOpen: function() {
        $("#modal").html("Attendere prego...");
    $("#modal").fadeIn(); // fadeIn function
    },
    onClose: function() {
        $("#modal").html("Attendere prego...");
        $("#modal").fadeOut(); //fadeOut function
    },
    inline: true,
    href: "#modal",
    close: "Chiudi",
    transition: "fade",
    opacity: 0.6,
    width: "600px",
    height: "100px",
    maxWidth: "500px",
    maxHeight: "500px",
});

Answer 2

解决了！只是colorbox的版本有点旧，网站现在使用最新的jQuery，更新colobox到最新版本完全解决了问题

jQuery Colorbox插件在第一次查看后销毁容器div

2 个答案: