Open multiple modal with remote content

Question

i use to open my modals like this and works fine

 <a href="/my-ajax-page.html" data-toggle="modal" data-target="#remoteModal" class="btn btn-default">Open Modal</a> <!-- Modal --> <div class="modal fade" id="remoteModal" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"></div> </div> </div> <!-- /.modal -->

now i m try to use different links to load the content inside my modal like

 <a href="/my-ajax-page.html?id=1" data-toggle="modal" data-target="#remoteModal">Open Modal 1</a> <a href="/my-ajax-page.html?id=2" data-toggle="modal" data-target="#remoteModal">Open Modal 2</a> <a href="/my-ajax-page.html?id=3" data-toggle="modal" data-target="#remoteModal">Open Modal 3</a>

i used on my example just 3 links but the number of links can be 10, 20 etc

Alvaro Louzada · Accepted Answer · 2015-11-13 04:54:39Z

I just found a answer here http://jsfiddle.net/sherbrow/thlyb/

$('[data-load-remote]').on('click',function(e) { e.preventDefault(); var $this = $(this); var remote = $this.data('load-remote'); if(remote) { $($this.data('remote-target')).load(remote); } }); <a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-remote-target="#myModal .modal-body">Btn 1</a> <a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/1/show/" data-remote-target="#myModal .modal-body">Btn 2</a> <a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/2/show/" data-remote-target="#myModal .modal-body">Btn 3</a> <a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/Sherbrow/bHmRB/3/show/" data-remote-target="#myModal .modal-body">Btn 4</a> <div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div>

thanks anyway

Collectives™ on Stack Overflow

Open multiple modal with remote content

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related