如何在模态弹出窗口中添加 X 关闭按钮和外部单击关闭功能？

Question

我想在这个模态弹出窗口的右上角添加 X（关闭按钮），并在点击它的外部时关闭它。

怎么做？

这是完整的代码：

如何在其中添加 X 按钮？

</script>
<?php if (!wp_is_mobile()) : ?>
<div id="surbma-yes-no-popup" class="uk-modal <?php echo 'surbma-yes-no-popup-' . $popupthemes; ?>">
   <div class="uk-modal-dialog">
    <div class="uk-modal-header">
            <h2><?php echo esc_attr_e( $options['popuptitle'] ); ?></h2>
        </div>
        <div class="uk-modal-content"><?php echo stripslashes( $options['popuptext'] ); ?></div>
        <div class="uk-modal-footer">
            <button id="button1" type="button" class="uk-button uk-button-large uk-button-<?php echo esc_attr_e( $options['popupbutton1style'] ); ?><?php if( $options['popupbuttonoptions'] != 'button-1-redirect' ) echo ' uk-modal-close'; ?>"><?php echo esc_attr_e( $options['popupbutton1text'] ); ?></button>
            <?php if( $popuphidebutton2 != 1 ) { ?>
                <button id="button2" type="button" class="uk-button uk-button-large uk-button-<?php echo esc_attr_e( $options['popupbutton2style'] ); ?><?php if( $options['popupbuttonoptions'] == 'button-1-redirect' ) echo ' uk-modal-close'; ?>"><?php echo esc_attr_e( $options['popupbutton2text'] ); ?></button>
            <?php } ?>
        </div>
    </div>
</div>
<?php endif; ?>

我们还应该在此模式的页脚添加哪些 javascript 代码？

这是下面的javascript代码：

<script type="text/javascript">
    function setCookie() {
        var d = new Date();
        d.setTime(d.getTime() + (<?php echo esc_attr_e( $popupcookiedays ); ?>*24*60*60*1000));
        var expires = "expires="+ d.toUTCString();
        document.cookie = "surbma-yes-no-popup=yes;" + expires + ";path=/";
    }
    function readCookie(cookieName) {
        var re = new RegExp('[; ]'+cookieName+'=([^\\s;]*)');
        var sMatch = (' '+document.cookie).match(re);
        if (cookieName && sMatch) return unescape(sMatch[1]);
        return '';
    }
    <?php if( $options['popupbuttonoptions'] != 'button-1-redirect' ) { ?>
        document.getElementById("button1").onclick = function () {
            setCookie();
        };
        document.getElementById("button2").onclick = function () {
            location.href = "<?php echo esc_attr_e( $options['popupbuttonurl'] ); ?>";
        };
    <?php } else { ?>
        document.getElementById("button1").onclick = function () {
            location.href = "<?php echo esc_attr_e( $options['popupbuttonurl'] ); ?>";
        };
        document.getElementById("button2").onclick = function () {
            setCookie();
        };
    <?php } ?>
</script>

Answer 1

这里的关闭“x”按钮事件是在 JavaScript 中处理的，而不是使用锚标记，这也是一个很好的方法，如果您不介意地址栏中出现 href id。

 var modal = document.querySelector('.modal') window.addEventListener('keydown', function (event) { if (event.key === 'Escape') { modal.style.display = 'none'; } }); window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } var elements = document.getElementsByClassName("modal-close"); for (var i = 0; i < elements.length; i++) { elements[i].addEventListener("click", function () { modal.style.display = 'none'; }); }

 p { margin-bottom: 20px; } .btn { background: #428bca; border: #357ebd solid 1px; border-radius: 3px; color: #fff; display: inline-block; font-size: 14px; padding: 8px 15px; text-decoration: none; text-align: center; min-width: 60px; position: relative; transition: color .1s ease; } .btn:hover { background: #357ebd; cursor: pointer; } .btn.btn-big { font-size: 18px; padding: 15px 20px; min-width: 100px; } .btn-close { color: #aaaaaa; font-size: 30px; text-decoration: none; position: absolute; right: 5px; top: 0; } .btn-close:hover { color: #919191; cursor: pointer; } .modal:target:before { display: none; } .modal:before { content:""; display: block; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } .modal .modal-dialog { background: #fefefe; border: #333333 solid 1px; border-radius: 5px; margin-left: -200px; position: fixed; left: 50%; z-index: 11; width: 36%; min-width: 420px; max-width: 690px; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; top: 20%; } .modal:target .modal-dialog { top: -100%; -webkit-transform: translate(0, -500%); -ms-transform: translate(0, -500%); transform: translate(0, -500%); } .modal-body { padding: 20px; } .modal-body p { text-align: justify; font-weight: 500; font-size: 1rem; color: #001e38; } .modal-header, .modal-footer { padding: 10px 20px; } .modal-header { border-bottom: #eeeeee solid 1px; } .modal-header h2 { font-size: 1.5rem; font-weight: 600; margin: 0px; color: #a30b0b; } .modal-footer { border-top: #eeeeee solid 1px; text-align: right; }

 <!-- modal --> <div style="margin-bottom: 10px;"> <div class="modal"> <div class="modal-dialog"> <div class="modal-header"> <h2>Modal heading</h2> <span class="btn-close modal-close" title="Click to close this dialog, or hit Escape key">&times;</span> </div> <div class="modal-body"> <p>Some modal content here...</p> </div> <div class="modal-footer"> <div id="close" class="btn modal-close">Close</div> </div> </div> </div> </div>