How to get twitter bootstrap modal to close after initial launch

Question

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    lt div class  modal visible-phone  id  myModal  gt     lt div class  modal-header  gt       lt button class  close  data-dismiss  modal  gt    lt  button gt       lt h3 gt text introductory lt br gt want to navigate to    lt  h3 gt    lt  div gt    lt div class  modal-body  gt       lt ul class  nav  gt         lt li gt      list of links here  lt  li gt       lt  ul gt      lt  div gt     lt  div gt    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

User · Answer

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>

User · Answer

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     lt a href   myModal  data-toggle  modal  gt Open my dialog lt  a gt    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

User · Answer

myModal   modal  hide   should do it

User · Answer

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  lt button gt  tag defines a clickable button and is needed to specify the type attribute for a  element as follow    lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt    check the example code for bootstrap modals at   BootStrap javascript Page

User · Answer

If you have few modal shown simultaneously you can specify target modal for in-modal button with attributes data-toggle and data-target    lt div class  modal fade in  id  sendMessageModal  tabindex  -1  role  dialog  aria-hidden  true  gt         lt div class  modal-dialog modal-sm  gt              lt div class  modal-content  gt                   lt div class  modal-header text-center  gt                        lt h4 class  modal-title  gt Modal Title lt  h4 gt                        lt small gt Modal Subtitle lt  small gt                   lt  div gt                   lt div class  modal-body  gt                        lt p gt Modal content text lt  p gt                   lt  div gt                   lt div class  modal-footer  gt                        lt button type  button  class  btn btn-default pull-left  data-toggle  modal  data-target   sendMessageModal  gt Close lt  button gt                        lt button type  button  class  btn btn-danger  data-toggle  modal  data-target   sendMessageModal  gt Send lt  button gt                   lt  div gt              lt  div gt         lt  div gt    lt  div gt    Somewhere outside the modal code you can have another toggle button    lt a href  index html   class  btn btn-default btn-xs  data-toggle  modal  data-target   sendMessageModal  gt Resend Message lt  a gt    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

User · Answer

modal  hide   manually hides a modal  Use following code to close your bootstrap model      myModal   modal  hide      Take a look at working codepen here  Or  Try here   x000D   x000D    function      x000D          custom-close   on  click   function     x000D              myModal   modal  hide    x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt  -- Button trigger modal -- gt  x000D   lt button class  btn btn-primary btn-lg  data-toggle  modal  data-target   myModal  gt  x000D    Launch demo modal x000D   lt  button gt  x000D   x000D   lt  -- Modal -- gt  x000D   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt  x000D     lt div class  modal-dialog  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt  x000D           lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           x000D             x000D             lt a class  custom-close  gt  My Custom Close Link  lt  a gt  x000D             x000D             x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D         lt  div gt  x000D       lt  div gt  lt  --   modal-content -- gt  x000D     lt  div gt  lt  --   modal-dialog -- gt  x000D   lt  div gt  lt  --   modal -- gt  x000D   x000D   x000D

User · Answer

Try on this       body   removeClass  modal-open         modal-backdrop   remove

User · Answer

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      lt div class  modal-footer form-footer  gt  lt br gt                 lt span class  caption  gt                   lt button id  PreLoadOrders  class  btn btn-md green btn-right  type  button  disabled gt Add to Cart amp nbsp   lt i class  fa fa-shopping-cart  gt  lt  i gt  lt  button gt                        lt button id  ClrHist  class  btn btn-md red btn-right  data-dismiss  modal  data-original-title    title  Return to Scan Order Entry  type  cancel  gt Cancel amp nbsp   lt i class  fa fa-close  gt  lt  i gt  lt  a gt                 lt  span gt         lt  div gt    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    lt div class  modal-footer caption  gt                   lt button type  submit  class  modal-close btn default  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt               lt  div gt    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

User · Answer

Add the class hide to the modal       lt  -- Modal Demo -- gt   lt div class  modal hide  id   myModal  aria-hidden  true   gt    Javascript Code    lt  -- Use this to hide the modal necessary for loading and closing the modal-- gt    lt script gt         function                 closeModal   click function                      myModal   modal  hide                              lt  script gt     lt  -- Use this to load the modal necessary for loading and closing the modal-- gt    lt script gt         function                   myModal   modal  show                lt  script gt

User · Answer

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

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

Examples related to twitter-bootstrap

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

Examples related to twitter-bootstrap

Examples related to modal-dialog