Кнопка закрытия модального HTML не работает + содержимое внутри не выравнивается

avatar
stedy
8 августа 2021 в 22:49
39
1
0

Я проверил похожие вопросы, но предложенные решения мне не подошли.

Проблема в том, что моя модальная кнопка закрытия не работает и содержимое внутри нее не выравнивается. (Обновление: когда я включил границу, я обнаружил, что странный квадрат занимает место под «X», но до сих пор не могу понять, почему)

Я думаю, что обе проблемы каким-то образом связаны, наряду с отступом вверху, но я не могу понять. Любая помощь будет очень признательна.

enter image description here

.mobile-menu {
  float: right;
  padding: 1.1em 0.6em 0.1em 0.9em;
  border: 1px solid;
}

.mobile-menu-modal {
  z-index:3;
  display:none;
  padding-top:85px;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.4);
}

.mobile-menu-modal-content{
  margin-right:10%;
  margin-left: auto;
  background-color:#fff;
  position:relative;
  padding:0;
  width:40%;
}

.mobile-menu-a {
  text-align:center;
  display:block;
  font-weight:bold;
  font-size:1.2em;
  border-bottom:1px solid #eee;
  padding: 0.5em;
}
<a class="mobile-menu" onclick="document.getElementById('mobilemenu').style.display='block'">Menu Button
  <div id="mobilemenu" class="mobile-menu-modal">
    <div class="mobile-menu-modal-content">
      <span onclick="document.getElementById('mobilemenu').style.display='none'" style="float:right;font-size:2em;cursor:pointer;">&times;</span>
      <div class="clearfix"></div>
      <div style="padding-top:5em">
        <a class="mobile-menu-a">200K+</a>
        <a class="mobile-menu-a">300K+</a>
        <a class="mobile-menu-a">400K+</a>
        <a class="mobile-menu-a">1M+</a>
      </div>
    </div>
  </div>
</a>
Источник
Rolv Apneseth
8 августа 2021 в 22:54
1

Не могли бы вы сделать минимальный воспроизводимый пример, показывающий эту проблему в фрагменте кода?

stedy
8 августа 2021 в 23:00
0

Конечно, я больше уменьшу фрагмент кода. Держитесь пожалуйста!

Rolv Apneseth
8 августа 2021 в 23:07
1

Просто для ясности, фрагмент кода, как в коде, который можно просто запустить здесь при переполнении стека (поскольку это просто html и css). Это позволяет отвечающим людям легко визуализировать проблему, запустив фрагмент кода, и отредактировать фрагмент кода, чтобы предоставить решение. Должна быть кнопка для вставки фрагмента при редактировании вопроса.

stedy
8 августа 2021 в 23:08
0

О, спасибо за разъяснение. Сделаю.

Cobra_8
8 августа 2021 в 23:29
1

если бы вы могли более подробно описать, что вы имеете в виду под «не выравниванием», я потенциально мог бы обновить свой пост ниже и помочь с этим.

Ответы (1)

avatar
Cobra_8
8 августа 2021 в 23:25
2

Вы должны закрыть свой тег <a> после текста (в тот момент, когда все, что вы хотите отобразить на главной странице, отображается). Затем запустите новый контейнер для всего, что вы хотите отобразить при нажатии кнопки. Также старайтесь избегать встроенных стилей и используйте дополнительный класс CSS для кнопки закрытия.

.mobile-menu {
  float: right;
  padding: 1.1em 0.6em 0.1em 0.9em;
  border: 1px solid;
}

.mobile-menu-modal {
  z-index:3;
  display:none;
  padding-top:85px;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.4);
}

.mobile-menu-modal-content{
  margin-right:10%;
  margin-left: auto;
  background-color:#fff;
  position:relative;
  padding:0;
  width:40%;
}

.mobile-menu-a {
  text-align:center;
  display:block;
  font-weight:bold;
  font-size:1.2em;
  border-bottom:1px solid #eee;
  padding: 0.5em;
}

.mobile-menu-modal .close-button {
  float: right;
  font-size: 2em;
  cursor: pointer;
}
<a class="mobile-menu" onClick="document.getElementById('mobilemenu').style.display='block'">Menu Button</a>
  <div id="mobilemenu" class="mobile-menu-modal">
    <div class="mobile-menu-modal-content">
      <span class="close-button" onClick="document.getElementById('mobilemenu').style.display='none'">&times;</span>
      <div class="clearfix"></div>
      <div style="padding-top:5em">
        <a class="mobile-menu-a">200K+</a>
        <a class="mobile-menu-a">300K+</a>
        <a class="mobile-menu-a">400K+</a>
        <a class="mobile-menu-a">1M+</a>
      </div>
    </div>
  </div>
stedy
8 августа 2021 в 23:31
1

Большое спасибо Cobra_8. Это решило мою проблему. В моем реальном коде я поместил изображение внутри тега <a>. Помещение модального div после </a> решило проблему! (проблема выравнивания также решена с этим)