Как добавить кнопку закрытия «x» в верхний правый угол uk-модального всплывающего окна? - PullRequest
Новая
       52

Как добавить кнопку закрытия «x» в верхний правый угол uk-модального всплывающего окна?

0 голосов
/ 19 мая 2019

Я пытаюсь добавить маленькую кнопку "x" в верхний правый угол всплывающего окна uk-modal. Как я могу правильно добавить его PHP-код и CSS и, возможно, его JavaScript?

Я пытался добавить ниже 1, 2 кода в 3 блока кода:

1) Первый код, который я добавил: 

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

2) Добавлен второй код: 

<div id="my-id">
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
    </div>
</div>

<div id="my-id">
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
    </div>
</div>

3) К этому блоку кода всплывающего окна: 

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

Я ожидал получить истинное место кнопки закрытия "x" во всплывающем окне, но оно не находится в правильном положении и также не может закрыть модальное всплывающее окно.

Я ожидаю получить это как на картинке ниже:

Как исправить?

пример кнопки x

1 Ответ

0 голосов
/ 19 мая 2019

Посмотрите, поможет ли это вам: 

.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
}
<header style="background-color:#000;color:#fff;">
  <span onclick="document.getElementById('YourModalBox').style.display='none'" class="close-button topright">&times;</span>
</header>

Не забудьте установить «YourModalBox» для вашего модального id и применить его к заголовку вашего модального блока, чтобы он входил в <div> и оставался в верхнем правом углу.

Живой пример из веб-приложения, которое я все еще разрабатываю (обратите внимание, что оно не будет отображаться должным образом, потому что я не публикую весь body HTML, оно будет слишком длинным и не имеет значения для значения ответ: 

// When the user clicks anywhere outside of the modal, close it	
window.addEventListener('click', function(event) {
  if (event.target == document.getElementById('mod_mec')) {
    document.getElementById('mod_mec').style.display = "none";
  }

  if (event.target == document.getElementById('mod_therm')) {
    document.getElementById('mod_therm').style.display = "none";
  }
});
#btn_menu {
  background-color: #000;
}

#btn_menu:hover {
  animation-name: change;
  animation-duration: 0.6s;
}

@keyframes change {
  from {
    background-color: #000
  }
  top {
    background-color: #777
  }
}

#subs {
  opacity: 0.7;
}

#subs:hover {
  cursor: pointer;
  opacity: 1;
  animation-name: hovering;
  animation-duration: 0.6s;
}

@keyframes hovering {
  from {
    opacity: 0.7;
  }
  top {
    opacity: 1;
  }
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<div class="w3-row-padding">
  <div class="w3-col l3 m6 w3-margin-bottom">
    <div id="subs" class="w3-display-container" onclick="document.getElementById('mod_mec').style.display='block'">
      <div class="w3-display-topleft w3-black w3-padding">Mechanics</div>
      <img src="_img/sub_bg.jpg" style="width:100%">
      <div class="w3-display-middle w3-light-grey w3-padding">
        V<sub>avg</sub> = &Delta;s &div; &Delta;t
      </div>
    </div>
  </div>
  <div id="mod_mec" class="w3-modal">
    <div class="w3-modal-content w3-animate-top w3-card-4">
      <header class="w3-container w3-black">
        <span onclick="document.getElementById('mod_mec').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <h2>Choose a topic</h2>
      </header>

      <!-- VELOCITY -->
      <div class="w3-col l3 m6 w3-margin-bottom">
        <a href="velocity.html">
          <div id="subs" class="w3-display-container">
            <div class="w3-display-topleft w3-black w3-padding">Velocity</div>
            <img src="_img/sub_bg.jpg" alt="House" style="width:100%">
            <div class="w3-display-middle w3-light-grey w3-padding">
              V<sub>avg</sub> = &Delta;s &div; &Delta;t
            </div>
          </div>
        </a>
      </div>
    </div>
...