Bootstrap 3 with remote Modal

Question

I just started a new project with the new Twitter Bootstrap release   bootstrap 3   I can t make the Modal work in the remote mode  I just want that when I click on a link it shows the modal with the content of the remote url  It works but the modal layout is completely destroyed   Here is a link to a jsfiddle   http   jsfiddle net NUCgp 5   The code     lt a data-toggle  modal  href  http   fiddle jshell net Sherbrow bHmRB 0 show   data-target   myModal  gt Click me   lt  a gt    lt  -- Modal -- gt   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt                    lt h4 class  modal-title  gt Modal title lt  h4 gt                lt  div gt               lt div class  modal-body  gt  lt div class  te  gt  lt  div gt  lt  div gt               lt div class  modal-footer  gt                   lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt                   lt button type  button  class  btn btn-primary  gt Save changes lt  button gt               lt  div gt           lt  div gt           lt  --   modal-content -- gt       lt  div gt       lt  --   modal-dialog -- gt   lt  div gt   lt  --   modal -- gt    Can anyone make this simple example work

User · Answer

For Bootstrap 3

The workflow I had to deal with was loading content with a url context that could change. So by default setup your modal with javascript or the href for the default context you want to show :

$('#myModal').modal({
        show: false,
        remote: 'some/context'
});

Destroying the modal wouldn't work for me because I wasn't loading from the same remote, thus I had to :

$(".some-action-class").on('click', function () {
        $('#myModal').removeData('bs.modal');
        $('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
        $('#myModal').modal('show');
});

This of course was easily refactored into a js library and gives you a lot of flexibility with loading modals

I hope this saves someone 15 minutes of tinkering.

User · Answer

Here s my solution  leveraging a few above  that makes use of BS3 s own structure to re-instate the old remote loading behaviour   It should be seamless   I m going to keep the code variable heavy and descriptive to keep things understandable  I m also assuming the presence of JQuery   Javascript heavy lifter types will handily streamline the code   For reference here s a link that invokes a BS3 modal    lt li gt  lt a data-toggle  modal  href  terms html  data-target   terms  gt Terms of Use lt  a gt  lt  li gt    In youre Javascript you re going to need the following      Make sure the DOM elements are loaded and accounted for   document  ready function           Match to Bootstraps data-toggle for the modal      and attach an onclick event handler      a data-toggle  modal     on  click   function e            From the clicked element  get the data-target arrtibute        which BS3 uses to determine the target modal     var target modal     e currentTarget  data  target           also get the remote content s URL     var remote content   e currentTarget href          Find the target modal in the DOM     var modal     target modal          Find the modal s  lt div class  modal-body  gt  so we can populate it     var modalBody     target modal      modal-body            Capture BS3 s show bs modal which is fires        immediately when  you guessed it  the show instance method        for the modal is called     modal on  show bs modal   function                     use your remote content URL to load the modal body             modalBody load remote content              modal               and show the modal         Now return a false  negating the link action  to prevent Bootstrap s JS 3 1 1        from throwing a  preventDefault  error due to us overriding the anchor usage      return false              We re just about there   One thing you may want to do is style the modal body with a max-height  so that long content will scroll   In your CSS  you ll need the following    modal-body      max-height  300px      overflow-y  scroll      Just for refference I ll include the modal s HTML  which is a knock-off of every Bootsrap Modal Example you ve ever seen    lt div id  terms  class  modal fade  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt           lt h3 id  termsLabel  class  modal-title  gt TERMS AND CONDITIONS lt  h3 gt         lt  div gt         lt div class  modal-body  gt         lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt         lt  div gt       lt  div gt  lt  --   modal-content -- gt     lt  div gt  lt  --   modal-dialog -- gt   lt  div gt  lt  --   modal -- gt

User · Answer

As much as I dislike modifying Bootstrap code  makes upgrading more difficult   you can simply add   find   modal-body   to the load statement in modal js as follows      original code    if  this options remote  this  element load this options remote      modified code if  this options remote  this  element find   modal-body   load this options remote

User · Answer

another great and easy way is to have a blind modal in your layout and call it if neccessary   JS    var remote modal   function url           reset modal body with a spinner or empty content     spinner     lt div class  text-center  gt  lt i class  fa fa-spinner fa-spin fa-5x fa-fw  gt  lt  i gt  lt  div gt            remote-modal  modal-body   html spinner          remote-modal  modal-body   load url           remote-modal   modal  show          and your HTML    lt div class  modal fade  id  remote-modal  gt       lt div class  modal-dialog modal-lg  gt         lt div class  modal-content  gt           lt div class  modal-body  gt  lt  div gt           lt div class  modal-footer  gt             lt button class  btn btn-default  gt Close lt  button gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  body gt    now you can simply call remote modal   my url html   and the content gets displayed inside of the modal

User · Answer

If you don t want to send the full modal structure you can replicate the old behaviour doing something like this      this is just an example  remember to adapt the selectors to your code      modal-link   click function e        var modal       modal    modalBody       modal  modal-body         modal          on  show bs modal   function                  modalBody load e currentTarget href                      modal        e preventDefault

User · Answer

I do it this way    lt  -- global template loaded in all pages    -- gt        lt div id  NewsModal  class  modal fade  tabindex  -1  role  dialog  data-ajaxload  true  aria-labelledby  newsLabel  aria-hidden  true  gt               lt div class  modal-dialog  gt                   lt div class  modal-content  gt                       lt div class  modal-header  gt                           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt                           lt h3 class  newsLabel  gt  lt  h3 gt                       lt  div gt                       lt div class  modal-body  gt                               lt div class  loading  gt                                   lt span class  caption  gt Loading    lt  span gt                                  lt img src   images loading gif  alt  loading  gt                           lt  div gt                       lt  div gt                       lt div class  modal-footer caption  gt                           lt button class  btn btn-right default modal-close  data-dismiss  modal  gt Close lt  button gt                       lt  div gt                   lt  div gt               lt  div gt           lt  div gt    Here is my a href    lt a href   NewsModal  onclick  remote   modal newsfeed php USER   trim  USER    amp FUNCTION   trim urlencode  FUNCTIONCODE     amp PATH INSTANCE    PATH INSTANCE   amp ALL ALL                                           remote target    NewsModal  modal-body    role  button  data-toggle  modal  gt See All Notifications  lt i class  m-icon-swapright m-icon-dark  gt  lt  i gt  lt  a gt

User · Answer

Regarding the remote option for modals  from the docs      If a remote URL is provided  content will be loaded via jQuery s load   method and injected into the root of the modal element    That means your remote file should provide the complete modal structure  not just what you want to display on the body   Bootstrap 3 1 Update   In v3 1 the above behavior was changed and now the remote content is loaded into  modal-content  See this Demo fiddle  Boostrap 3 3 Update      This option is deprecated since v3 3 0 and has been removed in v4  We recommend instead using client-side templating or a data binding framework  or calling jQuery load yourself

User · Answer

Here is the method I use   It does not require any hidden DOM elements on the page  and only requires an anchor tag with the href of the modal partial  and a class of  modalTrigger    When the modal is closed  hidden  it is removed from the DOM      function               Create jQuery body object         var  body      body                Use a tags with  class  modalTrigger   as the triggers          modalTriggers      a modalTrigger                Trigger event handler         openModal   function evt                  var  trigger     this                       Trigger jQuery object                modalPath    trigger attr  href             Modal path is href of trigger                 newModal                                   Declare modal variable                removeModal   function evt                  Remove modal handler                      newModal off  hidden bs modal        Turn off  hide  event                      newModal remove                      Remove modal from DOM                                 showModal   function data                   Ajax complete event handler                      body append data                     Add to DOM                      newModal       modal   last          Modal jQuery object                      newModal modal  show                 Showtime                       newModal on  hidden bs modal  removeModal      Remove modal from DOM on hide                                   get modalPath showModal                  Ajax request                evt preventDefault                         Prevent default a tag behavior                      modalTriggers on  click  openModal              Add event handlers           To use  just create an a tag with the href of the modal partial    lt a href  path to modal-partial html  class  modalTrigger  gt Open Modal lt  a gt

User · Answer

I did this       myModal   on  shown bs modal    e  - gt        e target  find   modal-body   load  http   yourserver com content

[twitter-bootstrap] Bootstrap 3 with remote Modal

Examples related to twitter-bootstrap

[twitter-bootstrap] Bootstrap 3 with remote Modal

Examples related to twitter-bootstrap

Examples related to modal-dialog