I successfully added "x" close button into modal popup. But when i click on it then shows only some part of the content. I'd want it to show full page of content not just upper part.
I've tried CSS code and this php code:
CSS:
.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.topright {
position: absolute;
right: 0;
top: 0
}
php:
<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">
<header style="background-color:#000;color:#fff;">
<span onclick="document.getElementById('surbma-yes-no-popup').style.display='none'" class="close-button topright" >×</span>
</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>
It is able to close the popup but it is only shows upper part of the content, not a full page. It is just like cut of upper page, i expect to show the full content after clicking on it. How to fix?