Jquery to open Bootstrap v3 modal of remote url

Question

I have a page of links to internal pages I need to open up in a Bootstrap modal DIV  The problem is that it seems that using the latest version of Bootstrap v3 in conjunction with jQuery v2 1 4 just doesn t work when it comes to loading content this way  There s plenty of tutorials I ve read about creating modals with Bootstrap and how remote content is being phased out  But there s got to be away to make this work with jQuery  or maybe not   The theory is that when you click   lt a class    href   log viewslim id 72  title  View  data-target   myModal  data-toggle  modal  gt View 72 lt  a gt    the content of data-load-remote is supposed to be read and injected into the div with class modal-body     lt div id  myModal  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 h4 class  modal-title  gt Event lt  h4 gt               lt  div gt               lt div class  modal-body  gt                   lt p gt Loading    lt  p 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  submit  class  btn btn-primary  gt Save changes lt  button gt               lt  div gt       lt  div gt   lt  div gt      However  when I try this example with jQuery v2 1 4 and BS v3 3   what it does is open up a modal window with grey background but all the styling of the modal window is gone  Meaning it seems to only display the modal-body div  but the modal header  pretty modal frame and bottom buttons in modal-footer div are not displayed at all  The only way to close the box is to click outside the modal box   I ve found examples all around about how to open up remote urls this way  but they all use outdated version of bootstrap  not the version I m working with  Can anyone shed some lights on this please

User · Answer

If using  worldofjr answer in jQuery you are getting error      e relatedTarget data is not a function   you should use       myModal   on  show bs modal   function  e        var loadurl     e relatedTarget  data  load-url          this  find   modal-body   load loadurl         Not that e relatedTarget if wrapped by        I was getting the error in latest Bootstrap 3 and after using this method it s working without any problem

User · Answer

A different perspective to the same problem away from Javascript and using php    lt a data-toggle  modal  href   myModal  gt LINK lt  a gt    lt div class  modal fade  tabindex  -1  aria-labelledby  gridSystemModalLabel  id  myModal  role  dialog  style  max-width  90    gt       lt div class  modal-dialog  style  text-align  left   gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt                   lt h4 class  modal-title  gt Title lt  h4 gt               lt  div gt               lt div class  modal-body  gt                   lt  php include   remotefile php      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  div gt   lt  div gt    and put in the remote php file your basic html source

User · Answer

From Bootstrap s docs about the remote option   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  If a remote URL is provided  content will be loaded one time via jQuery s load method and injected into the  modal-content div  If you re using the data-api  you may alternatively use the href attribute to specify the remote source  An example of this is shown below   lt a data-toggle  quot modal quot  href  quot remote html quot  data-target  quot  modal quot  gt Click me lt  a gt    That s the  modal-content div  not  modal-body  If you want to put content inside  modal-body then you need to do that with custom javascript  So I would call jQuery load programmatically  meaning you can keep the functionality of the dismiss and or other buttons as required  To do this you could use a data tag with the URL from the button that opens the modal  and use the show bs modal event to load content into the  modal-body div  HTML Link Button  lt a href  quot   quot  data-toggle  quot modal quot  data-load-url  quot remote html quot  data-target  quot  myModal quot  gt Click me lt  a gt   jQuery     myModal   on  show bs modal   function  e        var loadurl     e relatedTarget  data  load-url          this  find   modal-body   load loadurl

User · Answer

e relatedTarget data  load-url    won t work use dataset loadUrl         myModal   on  show bs modal   function  e        var loadurl   e relatedTarget dataset loadUrl        this  find   modal-body   load loadurl

User · Answer

In bootstrap-3 3 7 js you will see the following code    if  this options remote      this  element      find   modal-content        load this options remote    proxy function            this  element trigger  loaded bs modal          this       So the bootstrap is going to replace the remote content into  lt div class  modal-content  gt  element  This is the default behavior by framework  So the problem is in your remote content itself  it should contain  lt div class  modal-header  gt    lt div class  modal-body  gt    lt div class  modal-footer  gt  by design

User · Answer

So basically  in jquery what we can do is to load href attribute using the load function  This way we can use the url in  lt a gt  tag and load that in modal-body     lt a  href   site login  class  ls-modal  gt Login lt  a gt     JS script     ls-modal   on  click   function e     e preventDefault          myModal   modal  show   find   modal-body   load   this  attr  href

[jquery] Jquery to open Bootstrap v3 modal of remote url

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

[jquery] Jquery to open Bootstrap v3 modal of remote url

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to bootstrap-modal