There is a button:

<a href="#" class="to_contact">Нажать</a> 

It is necessary that when you click it, an adaptive modal window appears in the middle of the screen with 3 input fields and 2 buttons to close and continue.

How to implement it without bootstrap?

  • we want to be aware of when something finally happens! - NeedHate

1 answer 1

Here you are:

 .modalDialog { overflow: auto; 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; display: none; } .modalDialog:target { display: block; pointer-events: auto; } .modalDialog>div { width: 400px; position: relative; margin: 20% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; } .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; } 
 <a href="#openModal">Открыть модальное окно</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Закрыть" class="close">x</a> <h2>Модальное окно</h2> <input type="text"><br> <input type="text"><br> <input type="text"><br> <a href="#">Продолжить</a><br> </div> </div> 

  • it does not open completely in the middle, but a little higher, you can change please. - Sergio
  • This is clearly noticeable when displaying on a full screen - Sergio
  • .modalDialog> div {margin: 10% auto;} ps 10% - adjust as you need. - artem55555p
  • @Sergio, if the answer helped, select the answer and put +1 - artem55555p