0

Есть модальное окно. Сделано на HTMl + CSS. Никакого JS.

HTML:

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target {
  opacity:1;
  pointer-events: auto;
}

.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }
<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
  </div>
</div>

При закрытии окна в URL приписывается фраза #close. Вопрос.как изменить модальное окно что бы в URL не вписывалось #close?

4
  • дело в том что закрытие осуществляется через якорь , обычный якорь - т.е a href="#close "
    – user33274
    11 мая 2016 в 9:05
  • Думаю никак, потому что #close это анкор
    – tCode
    11 мая 2016 в 9:06
  • используйте обычное модальное окно - и код не так сложен и делать его пустяк - мне на работу уже - я показал бы - утром с ночи буду покажу как его делать
    – user33274
    11 мая 2016 в 9:06
  • @LenovoID обычное модальное окно это какое?
    – Tsyklop
    11 мая 2016 в 9:07

1 ответ 1

1

Используй input:checked вместо :target:

#openModal {
  display: none;
}

label {
  cursor: pointer;
}

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

#openModal:checked ~ .modalDialog {
  opacity:1;
  pointer-events: auto;
}

.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }
<input type=checkbox id=openModal>

<label for="openModal">Open Modal</label>

<div class="modalDialog">
  <div>
    <label for="openModal" title="Close" class="close">X</label>
    <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
  </div>
</div>

5
  • Возник вопрос. Этим способом получится сделать как тут?
    – Tsyklop
    11 мая 2016 в 15:08
  • @Tsyklop, да. Кладёшь input перед блоком, а в css делаешь +. То что было href и id становятся for и id.
    – Qwertiy
    11 мая 2016 в 18:27
  • я сделал так: input[id^='settings-checkbox-']:checked ~ .settings-window { opacity: 1 !important; pointer-events: auto !important; }
    – Tsyklop
    11 мая 2016 в 18:52
  • @Tsyklop, зачем, если можно положить их рядом и использовать просто плюс вместо тильды?
    – Qwertiy
    11 мая 2016 в 20:06
  • положить рядом что? не пойму. у меня эти чекбоксы находятся на разных плитках.
    – Tsyklop
    12 мая 2016 в 4:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.