Как добавить кнопку закрытия 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>