Question

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

更新->因此，获得正确的clasName和正确的模态ID，我仍然可以更改etc的整个模态背景，但是我无法更改显示：块值设置为none，我可以通过inspect更改为none，但是它不能通过选择器工作。

我有它通过我自己的WordPress循环工作，在这里我需要获取帖子ID和模态ID（），以显示正确的内容。

发现了问题。

因此，当我在控制台中记录thisBtn事件并单击“事件”时，会在控制台中得到此消息： 1.按下点击打开我得到显示块 2.但是，当我按X（关闭）时，我得到了一个无模型的var模型，此后立即单击以打开开火并将其再次阻止。所以我的错误是X按钮会同时触发，而Im试图找出原因。 CONSOLE PICTURE FOR THE ERROR

<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>

MODAL

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);
}

KRYZIUKAS

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);
}

Answer 1

Photo For Answer

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

WordPress Javascript模式显示无法关闭

1 个答案: