Click here to Skip to main content
15,848,157 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I create a page, with modals, and no of them doesn't show, I think JavaScript is wrong, but when I inspect code, seems everything is OK, show_modal is showing up, but modal doesn't load. Please help me.

HTML
<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

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');
});


What I have tried:

I have tried a lot of advice online but couldn't resolve this problem.
Posted
Updated 14-Aug-20 1:29am
Comments
Sandeep Mewara 14-Aug-20 4:24am    
have a look at this and see if it helps: https://stackoverflow.com/questions/16093568/bootstrap-modal-not-displaying/21461151

Further, which version of jQuery you are using, seems some known compatibility issue here: https://stackoverflow.com/questions/33118855/modal-doesnt-show-up-using-bootstrap

1 solution

Read the Bootstrap documentation[^] - you don't show or hide a modal by toggling a CSS class. Instead, you need to invoke the relevant Bootstrap method.
JavaScript
$(".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");
});
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900