Question

我有一个弹出窗口，使用以下代码打开：

更新：

<ul class="grid cs-style-1">
    <?php 
    $explainname = new wp_query( array ( 'post_type' => 'explainname' ) );  
    if ( $explainname->have_posts() ) : while ( $explainname->have_posts() ) : $explainname->the_post();
    $explainname_icon = get_post_meta( $post->ID,'explainname_icon', true );
    $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    $imageContent = get_the_content();
    $stripped = strip_tags($imageContent, '<p> <a>'); //replace <p> and <a> with whatever tags you want to keep after the strip

    ?>          
            <li class="desktop">
                <figure>
                    <img src="<?php echo $url; ?>" alt="<?php the_title(); ?>">
                    <figcaption>
                        <h3><?php the_title(); ?></h3>
                        <span style="text-align:right;font-size: 15px;"><?php echo $stripped; ?></span>
                    </figcaption>
                </figure>
            </li>
            <li class="popup" onclick="myFunction<?php echo $post->ID; ?>()">
                <figure>
                    <img src="<?php echo $url; ?>" alt="<?php the_title(); ?>">
                    <span class="popuptext" id="myPopup<?php echo $post->ID; ?>"><?php echo $stripped; ?></span>
                </figure>
            </li>
            <script>
            // When the user clicks on <div>, open the popup
            function myFunction<?php echo $post->ID; ?>() {
            var popup<?php echo $post->ID; ?> = document.getElementById("myPopup<?php echo $post->ID; ?>");
            popup<?php echo $post->ID; ?>.classList.toggle("show");
            }

            </script>

    <?php 
    endwhile; endif;
    wp_reset_query();
    ?>                  
</ul>

如何从弹出窗口中关闭该弹出窗口？

我的意思是我需要clase任何打开的弹出窗口，当我点击new div

Answer 1

使用此示例

<script>
    $(document).not("#myPopup<?php echo $post->ID; ?>").click(function() {
        $('#myPopup<?php echo $post->ID; ?>').hide();
    });
</script>

Answer 2

这是一个解决方案。当您单击DIV时，它将关闭您的弹出窗口。如果你想要定位所有弹出窗口，那么你需要给它们一个共同的类名。

document.getElementsByTagName('div').onclick = function(e){
    document.getElementById("myPopup<?php echo $post->ID; ?>").style.display = 'none';

});

Answer 3

只需在javascript

中使用它

var popup<?php echo $post->ID; ?> = document.getElementById("myPopup<?php echo $post->ID; ?>");
window.onclick = function() {
    if (popup.classList.contains("show")) {
        popup.classList.toggle("show");
    }
 }

如果我点击另一个div，关闭弹出窗口

3 个答案: