Bootstrap 3 - 模态 - 从多个远程源加载

时间:2014-04-25 00:19:28

标签: javascript jquery twitter-bootstrap

已经出汗了好几天..

我正在运行bootstrap 3.1并希望根据点击的按钮将不同的远程页面加载到我的模式中。

这是第一次单击按钮时有效,但是当我尝试加载第二页时,它会抛出一个未定义的错误。请帮助 - 当然这是一个常见的操作,我认为这将是困难的。

<script type="text/javascript">
function modalLoad(remotePage){

$('#myModal').modal({
    show: false,
    backdrop: true,
    keyboard: false,
    remote: remotePage
})   

$('#myModal').on('show.bs.modal', function (e) {
   alert('showing');        

 });
$('#myModal').on('shown.bs.modal', function (e) {
    alert('modal opened');
});  

$('#myModal').on('hidden.bs.modal', function (e) {
     // tried all of the variations below
     $(e.target).removeData("bs.modal").find(".modal-content").empty();
    // $(e.target).remove();
    // $(this).removeData('bs.modal');
    //$("#myModal").remove();
    //  $(this).data('bs.modal', null);      
     alert('removed');  
});

$('#myModal').modal('show');
};
</script>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            </div>
            <div class="modal-body">Update here</div>
    </div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<button style="primary" onclick="js:modalLoad('remotePage1.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>
<button style="primary" onclick="js:modalLoad('remotePage2.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>

任何帮助都会如此受到赞赏..:S

0 个答案:

没有答案