How to get twitter bootstrap modal to close (after initial launch)

twitter-bootstrap modal-dialog

I'm very much a noob, so I think I'm overseeing something (probably obvious) with twitter bootstrap modal. What I am trying to do is get a modal to launch only on mobile. This works fine with adding the class .visible-phone on the modal div. So far so good. But then I want it to work, meaning you can close it with the X button. And I cannot get the button to work.

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

In the bottom of the html I put jquery.js (first) and bootstrap.modal.js and bootstrap.transition.js. Actually all of the bootstrap js modules (not to miss an include). I'm not experienced with js..

Please forgive me if I posed a really stupid Q. I could not find the answer to this specific situation in the log.

Nauphal

$('#myModal').modal('hide') should do it

yes, that's working. But I don't have the same animation we have using 'data-dismiss="modal"' ?

ok my mistake. Actually I don't remember the issue I had at the time, I now use this and it works perfectly. TY!

Learn more here .. stackoverflow.com/questions/10944302/…

This is strange, $('#myModal').modal('show') works for me, but hide doesn't.

@LittleBigBot try using $('#myModal').modal('toggle'); instead

artkoenig

I had problems closing the bootstrap modal dialog, if it was opened with:

$('#myModal').modal('show');

I solved this problem opening the dialog by the following link:

<a href="#myModal" data-toggle="modal">Open my dialog</a>

Do not forget the initialization:

$('#myModal').modal({show: false});

I also used the following attributes for the closing button:

data-dismiss="modal" data-target="#myModal"

Hi artjom. Thnx! Will run it and give feedback. You are not using à button to open the modal? As that's what i am trying to achieve. Have à modal launch initially and only on mobile to offer à quick navigation menu to location (not relevant directly when on desktop) that's the idea.

Yes data-dismiss="modal" data-target="#myModal" solved my prob! appriciate!

shaunak1111

Add the class hide to the modal

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

Javascript Code

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>

Subodh Ghulaxe

.modal('hide') manually hides a modal. Use following code to close your bootstrap model

$('#myModal').modal('hide');

Take a look at working codepen here

Try here

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

Simon Cunningham

Try specifying exactly the modal that the button should close with data-target. So your button should look like the following -

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

Also, you should only need bootstrap.modal.js so you can safely remove the others.

Edit: if this doesn't work then remove the visible-phone class and test it on your PC browser instead of the phone. This will show whether you are getting javascript errors or if its a compatibility issue for example.

Edit: Demo code

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>

Hi @Simon Cunningham Tnx a million for answering! I've put in the data-target. Did not work (unfortunately) Then I removed the visible-phone class. Did not make a difference. code <div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal" data-target="#myModal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> <li> link2 </li> <li> link3 </li> </ul> </div> </div>code

<div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal" data-target="#myModal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> <li> link2 </li> <li> link3 </li> </ul> </div> </div>

Sorry for the text mess up there ;) I followed your advice. Seems logical to give the close button an exact data-target. But somehow I'm still not getting it to work. Even if disabling visible phone. Does not seem to influence the close button. (which is kind of a good thing)

How are you initially opening your modal? Try opening it as below -Open modal

I've added some cut down demo code to my original answer. The javascript and css files are local to my test project, just replace them with links to your own.

user706001

According the documentaion hide / toggle should work. But it don't.

Here is how I did it

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body

This is actually the correct "brute force" answer.. but i suggest to rewrite it to get the animation correct:

$("#modal-id").modal("toggle"); $(".modal-backdrop").fadeOut('fast',function(){ $("body").removeClass( "modal-open" ); $(".modal-backdrop").remove(); });

animuson

Try on this..

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();

Isma

I had the same problem in the iphone or desktop, didnt manage to close the dialog when pressing the close button.

i found out that The <button> tag defines a clickable button and is needed to specify the type attribute for a element as follow:

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

check the example code for bootstrap modals at : BootStrap javascript Page

Sound Blaster

If you have few modal shown simultaneously you can specify target modal for in-modal button with attributes data-toggle and data-target:

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

Somewhere outside the modal code you can have another toggle button:

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

User can't click in-modal toggle button while these button hidden and it correct works with option "modal" for attribute data-toggle. This scheme works automagicaly!

yardpenalty.com

Here is a snippet for not only closing modals without page refresh but when pressing enter it submits modal and closes without refresh

I have it set up on my site where I can have multiple modals and some modals process data on submit and some don't. What I do is create a unique ID for each modal that does processing. For example in my webpage:

HTML (modal footer):

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQUERY:

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

As you can see this submit performs processing which is why I have this jQuery for this modal. Now let's say I have another modal within this webpage but no processing is performed and since one modal is open at a time I put another $(document).ready() in a global php/js script that all pages get and I give the modal's close button a class called: ".modal-close":

HTML:

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery (include global.inc):

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });

How to get twitter bootstrap modal to close (after initial launch)

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US