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

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

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>

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

1 个答案: