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

I want to add X (Close button) on top right of this modal popup and also closing it when clicking outside of it.

How to do that?

Here is full code:

How to add X button into it?

</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; ?>

also which javascript code we should add at the footer of this modal?

Here is below javascript code:

<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>