html css jquery модальный не открывается в браузере - PullRequest
Новая
       11

html css jquery модальный не открывается в браузере

0 голосов
/ 20 октября 2019

Я пытаюсь создать модальное окно при нажатии кнопки для регистрации пользователей. Я не знаю, что не так. Кнопка нажимается, но модальное окно не открывается. Мой код такой

1002 *
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="button">
  <button type="button" onclick="document.getElementById(mymodal).style.display='block';">Create</button>


  <div id="mymodal" class="ourmodal">
    <div class="modal-content">

    </div>
  </div>
</div>
<style>
.ourmodal{
  display:none;
  position:fixed;
  overflow:auto;
  z-index:1;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:grey;
}
.modal-content{
  background-color:honeydew;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
</style>

Пожалуйста, помогите

Ответы [ 3 ]

0 голосов
/ 20 октября 2019

Вы можете использовать jquery, если вы вставили его.

Вы можете просто присвоить кнопке идентификатор, а затем использовать следующий код: 

 <div class="button">
      <button type="button" id="open-modal" ">Create</button>


      <div id="mymodal" class="ourmodal">
        <div class="modal-content">

            <button id="close-modal">close</button>
        </div>
      </div>
    </div>

и написать скрипт послеJQuery: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

      <script>
        jQuery('#open-modal').on('click',function(){
            jQuery('#mymodal').show();
        });
        jQuery('#close-modal').on('click',function(){
            jQuery('#mymodal').hide();
        });
      </script>
0 голосов
/ 21 октября 2019

@ ram-kc

Пожалуйста, попробуйте этот код: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="button">
  <button type="button" data-toggle="modal" data-target="#mymodal">Create</button>


  <div id="mymodal" class="ourmodal">
    <div class="modal-content">

    </div>
  </div>
</div>
<style>
.ourmodal{
  display:none;
  position:fixed;
  overflow:auto;
  z-index:1;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:grey;
}
.modal-content{
  background-color:honeydew;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
</style>

Надеюсь, приведенный выше код будет вам полезен. Спасибо.

0 голосов
/ 20 октября 2019

Вы забыли добавить одинарные кавычки: 

<button type="button" onclick="document.getElementById('mymodal').style.display='block'">....
...