Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Dynamic (AJAX) loaded Bootstrap Modal (Bootstrap 2.1)
$(document).ready(function() {
// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('<div class="modal hide fade">' + data + '</div>').modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});
});
<a href="/url/to/load/modal_window.htm" data-toggle="modal">link</a>
<div class="modal-header">
<a class="close" data-dismiss="modal">&times;</a>
<h3>Modal header 2</h3>
</div>
<div class="modal-body">
<p>One body...</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" onclick="$('.modal-body > form').submit();">Save Changes</a>
<a class="btn" data-dismiss="modal">Close</a>
</div>
Owner

drewjoh commented Jan 27, 2012

Just a quick hack to get something working.

dbmmedia commented Mar 4, 2012

Works fine! = ))
Thanks for the code ...

Thanks! Works well!

nyalex commented May 31, 2012

You have a typo in the link HTML (index.htm)...it should be "href" :-)

Owner

drewjoh commented May 31, 2012

Oops, thanks! Fixed. :)

norus commented Jun 6, 2012

Hi, thanks! Can you add a function to destroy the modal on data-dismiss="modal"?

it works fine, but after i close the model, the model goes "display none" but not totally disappear from the page.
is this expected?
this is what i see in the page inspector after couple open/close modals:

... class="modal hide fade" style="display: none; ">
... class="modal hide fade" style="display: none; ">
... class="modal hide fade" style="display: none; ">

Owner

drewjoh commented Jun 13, 2012

Sure, good catch. Added code that should delete the modal window when the close button is clicked. Not sure about if they click outside the modal window... an exercise for the developer? :)

this didn't seem to fix the issue, at least for me. they still pile up with "display: none"

after every open modal i see, these 2 divs, first one(modal-backdrop fade in) is blank,
second div(modal hide fade in) has my modal.
after the close, the first one(modal-backdrop fade in) disappears but the second div remains.
it remains with "display: none" though.

div class="modal-backdrop fade in">
div class="modal hide fade in" style="display: block;">

Owner

drewjoh commented Jun 13, 2012

Note: Removed the delete code as it doesn't appear to be a full solution.

nextroy commented Jun 27, 2012

Hey Drewjoh,

I created a tiny fork which solves multiple insertion of modal content in the page.

norus commented Jul 16, 2012

You mind sharing the code, nextroy? :)

nextroy commented Jul 16, 2012

@norus .. check my fork .. its there :)

norus commented Jul 16, 2012

Thanks, didn't see it the first time :)

notrab commented Oct 19, 2012

I'm using Bootstrap and this doesn't focus on the input inside the modal contents dynamically loaded but the input box I have in my navbar..

Can anyone suggest a fix?

Octen commented Oct 22, 2012

data-target="#" : Not to have : Syntax error, unrecognized expression

<a href="/url/to/load/modal_window.htm" data-target="#" data-toggle="modal">link</a>

Add "remove" from modal, for do not clone :

$("[data-toggle=modal]").click(function(event) {
            event.preventDefault();
            var url = $(this).attr("href");
            if (url.indexOf("#") == 0) {
                $(url).modal('open');
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal().on('hidden', function () { $(this).remove(); });
                }).success(function() { $('input:text:visible:first').focus(); });
            }
        });

Sorry for my poor English ;)

Very nice!

Very useful!

But in my projeto I had a problem....
All my pages are encoded on iso-8859-1 because of many special chars like "ç", 'á', "õ" ... and when I loaded the remote page into my modal, it was all irregular, chars missing/mistake.

Does someone here had this problem? How was it solved by you?

Thanks
Massa

People, I solved my problem setting the header parameters from my remote page, it was too simples.. sorry for the inconvenience.

Thanks @octen. I changed input fields to input:visible:enabled:first and added focus trigger on "shown".

$("[data-toggle=modal]").click(function(event){
event.preventDefault();
var url = $(this).attr("href");
if (url.indexOf("#") == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('

' + data + "
").modal().on("shown", function () {
$('input:visible:enabled:first').focus();
}).on("hidden", function () {
$(this).remove();
});
});
}
});

polds commented Nov 22, 2012

The following is a good hack on how to fix this.remove() (worked for me anyways)

  event.preventDefault();
  var url = $(this).attr("href");
  if (url.indexOf("#") == 0) {
      $(url).modal('open');
  } else {
      $.get(url, function(data) {
          $('<div class="modal hide fade">' + data + '</div>').modal().on('hidden', function(){
           $('.modal-backdrop.in').each(function(i) {
              $(this).remove();
          });
        });
      }).success(function() { $('input:text:visible:first').focus(); });
  }

jquery returns an error.

I think that this function needs a return false at end (I'm using bootstrap 2.1.1):

$("[data-toggle=modal]").on('click', function(event){
  event.preventDefault();

  var url = $(this).attr("href");

  if (url.indexOf("#") == 0) {
      $(url).modal('open');
  } else {
      $.get(url, function(data) {
          $('
' + data + '
').modal().on('hidden', function(){ $('.modal-backdrop.in').each(function(i) { $(this).remove(); }); }); }).success(function() { $('input:text:visible:first').focus(); }); } return false; });

asdaru commented Jan 31, 2013

If you will need close modal from script, it will be problem
I will be add parse "date-target" attribute and add Id to modal.
And I have error in Crome when I open several modal without refresh page I submit not last form. I chanded remove modal to remove by "Id" and for my tasks it work right

$(document).ready(function() {
    $('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        var data_target=$(this).attr('data-target');
        if (data_target=="#") {
            data_target="#modal"+parseInt(Math.random()*1000);

        }
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0) {
            $(url).modal('open');
        } else {
            $.get(url, function(data) {
                        $('<div class="modal hide fade" id="'+data_target.replace("#","")+'">' + data + '</div>')
                                .modal()
                                .on('hidden', function(){
                                        $(data_target).remove();
                                 });
                    }).success(function() {
                        $('input:text:visible:first').focus();
                    });
        }
    });
    return false;
});

Hi

Thank you very much for the trick, i didn't know how to do to change the modal with ajax.
I tried it and it works, but there are some mistakes (there is one div more each click), so i change a line and now it works without problem.

I replace this line (in custom.js) :

$('<div class="modal hide fade">' + data + '</div>').modal();

by :

$('.modal-body').html(data);

I hope it can be helpful and my English is not to bad^^

JB

mdsrosa commented Mar 18, 2013

Thank you. This was very helpfull.

I also replace:

<div class="modal hide fade">' + data + '</div>

with

$('.modal-body').html(data);

Another thing: at the first time you click, the ajax is called twice. But, if you click again, the ajax is called just once. I think that the "event.preventDefault();" is not getting executed at the first click...any thoughts?

Hi !

event.preventDefault() is used to stay in the same page. Without it you'll go to the link.

I had the same problem too (i saw it after posting). So what i did is :

$('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        if($('#editer-image').attr('aria-hidden'))
        {
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0)
            {
                $(url).modal('open');
            } else {
                $.get(url, function(data){
                        $('.modal-body').html(data);
                }).success(function(){
                        $('input:text:visible:first').focus();
                    });
            }
        }
    });

#editer-image is my div, which is in my modal. After the first click, it gets the attribute aria-hidden (true when the modal is on and false when i close the modal).

With this trick, i call just one time the ajax request.

The ajax loads perfectly, however within the popup I have a couple of links/forum posts. How can I keep the modal open without reloading the main page and just post content within the modal?

T0MASD commented May 28, 2013

Thanks for the snippet, I'm trying to work out how to set the button label to "loading" while modal (which takes time to generate) is loading. Any help much appreciated!

Hi! thanks for the gist, very useful and everything looks works fine. but when I open the console log this error appear everytime I click the trigger button :

Uncaught Error: Syntax error, unrecognized expression: http://project.local/bpmpt/data/administrasi/properti/form

i've try to change it into:

$('a[data-toggle="modal"]').click( function (e) {
    e.preventDefault();
    var btn = $(this),
        url = btn.attr('href')

    if (url.indexOf('#') == 0) {
        $(url).modal('open')
    } else {
        btn.button('loading')

        $.get(url, function (data) {
            $('.modal').modal().on('shown', function () {
                $(this).html(data)

                btn.button('reset')
            }).on('hidden', function () {
                $(this).html('')
            })
        })
    }
})

but nothing help, any other idea?

axar commented May 31, 2013

Feryardiant,

I was having the same issue. It's because of data-toggle="modal" change it to something else like data-foo="modal"
on the jQuery filter as well as the Anchor.

a href="asdf/asdf/asdf" data-foo="modal">
.... ....
$('a[data-foo="modal"]').click( function (e) {

thanks @axar you're right. as you said, i do try to change data-toggle="modal" but not in another data attribute, i put it in class="toggle-modal" and the JS like so.

$('a.toggle-modal').click( function (e) {
...

and now it's works well ^_^

mgostick commented Jul 5, 2013

Maybe some of you are looking to force the modal to load fresh content on each pop, I found this instead:

  $('.modal').on('hidden', function() {
    $(this).data('modal', null);
  });

It's great
tanks

Esto due genial, gracias por compartir

Any way to add Previous/Next navigation with href attr?

Just wanted to say thanks for this.

When trying to fix the two background divs problem mentioned by @vcivelek, I discovered this code is superfluous.

Check out the remote option in the docs.

How work modal with mysql ( href="#myModal<?php echo $row->id;?"> class="thumbnail" data-toggle="modal" )
I am a new bee in php and I know I'm a little messed up, please help?

jonhkr commented Aug 19, 2013

I made some modifications to work with bootstrap 3 and ladda loading buttons support
see my fork at: https://gist.github.com/jonhkr/6269312

Hi drewjoh, nice code.
You saved me 20mins.

can we able to open the modal which contains external link or .aspx or .php file?

I am using following code for displaying remote page into modal.....
i am using hyperlink on image & one label value
these 2 are the columns of table & they are sortable columns,
if i sort then click hyperlink after that modal is not opening here is my javascript code,
however it works fine for ie 8 but
in fireforx & ie > 8
it requires to refresh the page

$(document).ready(
function(){
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();

            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {

                $(url).modal('open');
            } else {

// alert("else url["+url+"]");
$.get(url, function(data) {
$('

' + data + '
').modal().on('hidden', function () { $(this).remove(); });;
}).success(function() { $('input:text:visible:first').focus(); });
}
});
});

Please help me out the above mentined issue? is it true that due to sorting Document i modified & that $(document).ready() function is unable to listen those changes..what is the solution for this, please get out me this issue..

Thanks!!!!!!!!!!!!!

archonic commented Nov 5, 2013

Thanks @drewjoh! This saves me from having a totally absurd amount of static HTML for various modals.

I got rid of the success in event in favor of the autofocus attribiute. (http://www.w3.org/wiki/HTML5_form_additions#autofocus)

Thanks!

Thanks for a very straighforward script

Thanks, very useful.

sayolie commented May 13, 2016

Thanks @drewjoh great job; please can someone help me on how to pass variable to a remote php file using Ajax $.get, thanks

Good solution, but the problem here is that the function get's triggered twice, I changed it to
data-toggle="ajax-modal"

navdeepsingh commented Jul 4, 2016 edited

To remove dynamic modal loaded in DOM. the following works for me.
$('<div id="clue-modal" class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog"><div class="modal-content">' + data + '</div></div></div>').modal().on("hidden.bs.modal", function () { $(this).remove(); });

Can check https://gist.github.com/navdeepsingh/de4718a074b812637330f668d2a73b7e

Thanks!!

Gracias,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment