Matas - developer Ответов: 1

Модал не загрузочный


Я создаю страницу с модалами, и ни один из них не отображается, я думаю, что 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');
});


Что я уже пробовал:

I have tried a lot of advice online but couldn't resolve this problem.

Sandeep Mewara

взгляните на это и посмотрите, поможет ли это: https://stackoverflow.com/questions/16093568/bootstrap-modal-not-displaying/21461151

Кроме того, какая версия jQuery вы используете, кажется, некоторые известные проблемы совместимости здесь: https://stackoverflow.com/questions/33118855/modal-doesnt-show-up-using-bootstrap

1 Ответов

Рейтинг:
10

Richard Deeming

Прочитай программа начальной загрузки, документация[^] - вы не показываете и не скрываете модал, переключая класс CSS. Вместо этого вам нужно вызвать соответствующий метод начальной загрузки.

$(".extra").click(function(){
    var m = this,
        classes = m.className.split(/\s+/);
    
    for (var i = 0; i < classes.length; i++) {
        if (classes[i].match(/^modal-/)) {
            var modalClass = classes[i];
            $(".modal." + modalClass).modal("toggle");
        }
    }
});

$(".close-modal").click(function(){
    $(this).closest(".modal").modal("hide");
});

$(".overlay").click(function(){
    $(this).closest(".modal").modal("hide");
});