Блог

Главная - Вопросы по программированию - Модальный не показывает bootstrap

Модальный не показывает bootstrap

#javascript #html #bootstrap-modal

#javascript #HTML #bootstrap-модальный

Вопрос:

Я создаю страницу с модалами, и ни один из них не отображается, я думаю, что JavaScript неправильный, но когда я проверяю код, кажется, все в порядке, show_modal отображается, но modal не загружается. Пожалуйста, помогите мне.

             <a href="#" class="extra modal-5 o-table__cell-data"> Pranešimų nustatymai </a>
        <div class="modal modal-5">
          <div class="overlay" id='five'></div>
          <div class="modal__content mod_transition">
            <div class="close_modal" id='five'>
            <div class='entypo-cancel-circled' id='icon'></div></div>
            <h1>Modal One</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
              <ul>
              <li class="entypo-facebook-circled "></li>
              <li class="entypo-gplus-circled"></li>
              <li class="entypo-pinterest-circled"></li>
              <li class="entypo-twitter-circled"></li>
              </ul>
               <div class="byline">
                <address class="author">By:  <div id="author" href="/author/john-doe">John Doe</a></address>
                on <time pubdate datetime="2014-08-21" title="August 21st, 2014">8/21/14</time>
              </div>
          </div>
        </div>
      </div>

JAVASCRIPT

     $('.extra').click(function() {
  var m = $(this)[0],
      classes = m.className.split(/s /);
  for(var i = 0; i < classes.length; i  ) {
    if(classes[i].match(/modal-/)) {
      var modalClass = classes[i];
      $('.modal.'   modalClass).toggleClass('show_modal');
    }
  }
});
$('.close_modal').click(function() {
  $(this).closest('.modal').toggleClass('show_modal');
});
$( '.overlay' ).on( 'click', function() {
  $(this).closest('.modal').toggleClass('show_modal');
});

Ответ №1:

Похоже, вы не добавили класс modal_diaplay на свою страницу. Добавьте этот CSS в свой тег style в начале страницы.

 <style>
  .show_modal{display:block}
</style>

Это отобразит модальный параметр, когда вы нажмете на свою ссылку, но ваш код, похоже, не подходит для модального параметра.

Используйте этот модальный:

 <div class="modal modal-5" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Ответ №2:

Мое самое большое предположение заключается в том, что вы пытаетесь открыть bootstrap modal, но в конечном итоге упираетесь в стену.

Вот самый простой способ, которым вы можете это сделать, смотрите фрагмент кода ниже.

Я предлагаю вам перейти по этой ссылке для более подробного объяснения того, как работает bootstrap modal: Модальный плагин Bootstrap для JavaScript

Я также рекомендую вам перейти к основному для правильного понимания того, как работают модальные поля, вот ссылка для создания простых модальных полей html, css и js без использования каких-либо плагинов: Как создать модальное поле

Удачи и удачного кодирования 🙂 …

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

<br>
<!-- Button trigger modal -->
<button type="button" class="extra btn btn-primary" >
    Pranešimų nustatymai
</button>

<!-- Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="close-modal btn btn-secondary">Close</button>
      </div>
    </div>
  </div>
</div>
  
</div>

<script>

 $(document).ready(function () { 
     
    $('.extra').click(function() {
      $("#myModal").modal();
    });

    $('.close-modal').click(function() {
      $("#myModal").modal('hide');
    });

});
</script>
</body>
</html>

Ответ №3:

Если у вас нет ограничений для проекта и вы используете Boostrap, взгляните на документацию (https://getbootstrap.com/docs/4.0/components/modal /), вам не нужны никакие строки JavaScript для отображения и закрытия модального окна:

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>
</div>
</body>
</html>