时间戳

首页 > 解决方案 > Wordpress Javascript 模态显示不关闭

javascript - Wordpress Javascript 模态显示不关闭

问题描述

当我单击 div 时，我有一个打开模式的功能。它打开了，但是当我按 X 时它不会关闭模态。显示不会将值更改为无，但我可以更改背景颜色和其他所有内容。

更新->因此获得正确的 clasName 和正确的模态 ID，我仍然可以更改等的整个模态背景，但我无法将显示：块值更改为无，我可以通过检查更改为无，但它无法通过选择器。

我让它通过我自己的 WordPress 循环工作，我需要在其中获取帖子 ID 和模态 ID ()，以显示正确的内容。

发现问题。

因此，当我在控制台记录这个 Btn 事件并单击事件时，我在控制台中得到了这个：1.pressing click-to-open 我得到显示块 2。但是当我按下 X（关闭）时，我得到 var model 谁是 NONE，然后立即单击以开火并使其再次阻塞。所以我的错误是X按钮同时触发，我试图弄清楚。 错误的控制台图片

<div id="click-to-open<?php echo get_the_ID(); ?>" data-modal="<?php echo get_the_ID(); ?>" class="qodef-event-list-item-holder  <?php  echo get_the_ID(); ?>">

<?php echo prowess_core_get_shortcode_module_template_part('templates/parts/image', 'event-list'); ?>

<div class="qodef-event-list-item-content">
  <div class="qodef-event-list-item-content-holder">
    <div class="qodef-event-list-item-content-inner">
    <?php
    echo prowess_core_get_shortcode_module_template_part('templates/parts/category', 'event-list', '', $params);
    echo prowess_core_get_shortcode_module_template_part('templates/parts/title', 'event-list', '', $params);
    echo prowess_core_get_shortcode_module_template_part('templates/parts/excerpt', 'event-list', '', $params);
    //echo prowess_core_get_shortcode_module_template_part('templates/parts/info', 'event-list', '', $params);
    echo prowess_core_get_shortcode_module_template_part('templates/parts/read-more', 'event-list', '', $params);
    ?>
    </div>
  </div>
</div>
<!-- The Modal -->
<div id="<?php echo get_the_ID();?>" class="modal" >
<!-- Modal content -->
  <div class="modal-content" id="content<?php echo get_the_ID();?>" >
    <span id="close" class="close<?php echo get_the_ID();?>" data-modal="close">&times;</span>
    <p><?php the_content( 'Read more ...' ); ?></p>                                
  </div>

模态

var btn = document.getElementsByClassName("<?php echo get_the_ID(); ?>");
  for (var i = 0; i < btn.length; i++) {
    var thisBtn = btn[i];
    thisBtn.addEventListener("click", function() {
      var modal1 = document.getElementById(this.dataset.modal);
      modal1.style.display = "block";  
    }, false);
}

克里祖卡斯

var span = document.getElementsByClassName("close<?php echo get_the_ID();?>");
// console.log(span)
  for (var b = 0; b < span.length; b++) {
    var click = span[b];
    click.addEventListener("click", function(){
      var modal = document.getElementById("<?php echo get_the_ID();?>");
      modal.style.display = 'none';
      console.log("modal", modal)
      console.log('modal style--->', modal.style);
    }, false);
}

标签： javascriptphphtmlcsswordpress

解决方案

答案照片

所以问题是事件侦听器中的值 false 我需要将其更改为 true。说明：https ://www.w3schools.com/js/js_htmldom_eventlistener.asp

推荐阅读