Dynamic (AJAX) loaded Bootstrap Modal (Bootstrap 2.1)

custom.js

$(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(); });
	}
});
	
});

index.htm

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

modal_window.htm

<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>

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?

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 ^_^

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?

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!!!!!!!!!!!!!

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.

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"

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,