Question

问题在这里，当我在我的循环中使用这个代码时有多个帖子，弹出只打开一个阅读更多按钮，它不能与所有阅读更多按钮

<style>
            #overlay {
                display: none;
                position: absolute;
                top: 0;
                bottom: 0;
                background: #999;
                width: 100%;
                height: 100%;
                opacity: 0.8;
                z-index: 100;
            }
            #popup {
                display: none;
                position: absolute;
                top: 50%;
                left: 50%;
                background: #fff;
                width: 500px;
                height: 500px;
                margin-left: -250px; /*Half the value of width to center div*/
                margin-top: -250px; /*Half the value of height to center div*/
                z-index: 200;
            }
            #popupclose {
                float: right;
                padding: 10px;
                cursor: pointer;
            }
            .popupcontent {
                padding: 10px;
            }
            #button {
                cursor: pointer;
            }
        </style>

    </head>
    <body>
    <div id="maincontent">
        <h1>Page Content<h2>
        <button id="button">Show Popup</button>
    </div>
    <div id="overlay"></div>
    <div id="popup">
        <div class="popupcontrols">
            <span id="popupclose">X</span>
        </div>
        <div class="popupcontent">
            <h1>Some Popup Content</h1>
        </div>
    </div>
    <script type="text/javascript">
        // Initialize Variables
        var closePopup = document.getElementById("popupclose");
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        var button = document.getElementById("button");
        // Close Popup Event
        closePopup.onclick = function() {
            overlay.style.display = 'none';
            popup.style.display = 'none';
        };
        // Show Overlay and Popup
        button.onclick = function() {
            overlay.style.display = 'block';
            popup.style.display = 'block';
        }
    </script>

http://polestarllp.com/polestarnew/category/blog/

Answer 1

您正在重复ID，它将无法正常工作。尝试使用类而不是ID。

而不是

jQuery(".popupclose");

使用

<div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php //the_post_thumbnail('category-thumbnail'); ?><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?></a> <?php the_excerpt(); ?> <div class="maincontent"> <button class="button">Readmore</button> </div> <div class="overlay"></div> <div class="popup"> <div class="popupcontrols"> <span class="popupclose">X</span> </div> <div class="popupcontent"> <?php echo do_shortcode('[contact-form-7 id="333" title="Front-contact-us"]');?> </div> </div>

完整的代码。

HTML

jQuery(".button").click(function(){
    jQuery(this).closest('.overlay').show();
    jQuery(this).closest('.popup').show();
});


jQuery(".popupclose").click(function(){
    jQuery(this).closest('.overlay').hide();
    jQuery(this).closest('.popup').hide();
});

JS

System.Text.RegularExpressions.Regex

我正在尝试创建多个弹出窗口，阅读更多的按钮

1 个答案: