Question

我用这个打开我的模态并且工作正常

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

现在我尝试使用不同的链接加载我的模态中的内容，如

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

我在我的例子中使用了3个链接，但链接数量可以是10,20等

Answer 1

我刚刚在这里找到答案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>

非常感谢

使用远程内容打开多个模态

1 个答案: