Question

我使用ajax和wordpress打开帖子作为模态。它不是一个PHP的问题，但jquery所以我在这里问。模态显示：默认为none。当您单击wordpress链接模式打开（显示：块）并加载帖子。这有效。然后当您单击关闭按钮时，模态将再次显示：无。这按预期工作。问题是当我尝试重新打开链接或任何其他帖子链接时，没有任何反应，只显示覆盖（覆盖div为效果模式）。没有加载模态或链接的html。模态甚至不显示为空白。

jquery的

jQuery(document).ready(function ($) {

            $.ajaxSetup({cache: false});

            var post_link = $(".post-link").attr("href");

            $(".post-link").click(function () {
                $(".ajax-cont").addClass("ajax-popup-show");
                $("#single-post-container").addClass("ajax-popup-show").html("Molimo Pričekajte");
                $("#single-post-container").load(post_link);
                $(".ovrly").fadeIn(100);
                return false;
            });

            $(".ajax-close").click(function () {
                $(".ajax-cont").empty().addClass("ajax-popup-hide");
                $("#single-post-container").empty().addClass("ajax-popup-hide");
                $(".ovrly").fadeOut(100);
            });

        });

CSS

.ajax-cont {
    position: absolute;
    width: 75%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 999;
    height: auto;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    top: 10%;
    display: none;
    left: 50%;
}

.prodaja-cont {
    position: absolute;
    width: 40%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 999;
    height: auto;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    top: 10%;
    display: none;
    left: 50%;
}

.ajax-popup {
    width: 100%;
    padding: 30px;
    background: #fff;
}

.ajax-close {
    position: absolute;
    right: 30px;
    top: 0;
    cursor: pointer;
    z-index: 9999;
    width: 10px;
    height: 10px;
}

.ajax-close:before {
    content: "\f404";
    font-family: "Ionicons";
    font-size: 3em;
}

.ajax-popup-show {
    display: block;
}

.ajax-popup-hide {
    display: none;
}

.ovrly {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    /*dim the background*/
    display: none;
}

HTML / PHP

<div class="ovrly"></div>
    <div class="ajax-cont">
        <div class="ajax-popup" id="single-post-container"></div>
        <div class="ajax-close"></div>
    </div>

<a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

Answer 1

我认为执行$(".ajax-cont").empty()时会删除其所有内容，包括

<div class="ajax-popup" id="single-post-container"</div>
<div class="ajax-close"></div>

尝试将关闭处理程序的第一行更改为 $(".ajax-cont").addClass("ajax-popup-hide") 删除empty()

第二次点击链接时，没有任何#single-post-container可以让您满意。

您还应该从ajax-popup-hide和.ajax-cont

中移除课程#single-post-container

$(".post-link").click(function () {
  $(".ajax-cont").addClass("ajax-popup-show").removeClass("ajax-popup-hide");
  $("#single-post-container").addClass("ajax-popup-show").removeClass("ajax-popup-hide").html("Molimo Pričekajte");
  $("#single-post-container").load(post_link);
  $(".ovrly").fadeIn(100);
  return false;
});

$(".ajax-close").click(function () {
  $(".ajax-cont").addClass("ajax-popup-hide");
  $("#single-post-container").empty().addClass("ajax-popup-hide");
  $(".ovrly").fadeOut(100);
});

ajax关闭一次后才重新开放

1 个答案: