Question

所以，这是交易，我不想这样做，因为我觉得这真的很俗气和混乱。：

function showModal(title, body) {
    var html = '<div class="modal fade" tabindex="-1" role="dialog">' +
    '<div class="modal-dialog">' +
    '<div class="modal-content">' +
    '<div class="modal-header">' +
    '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
    '<h4 class="modal-title">' + title + '</h4>' +
    '</div>' +
    '<div class="modal-body">' +
    '<p>' + body + '</p>' +
    '</div>' +
    '<div class="modal-footer">' +
    '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
    '<button type="button" class="btn btn-primary">Save changes</button>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>';

    var modal = $(html);
    modal.modal("show");
}

我想要发生的是，删除var html的内容并将其保存在单独的html文件中，然后加载.modal(show)。有没有办法用jquery做到这一点？引号和加号很容易变得混乱，我不想要那样。对不起，如果这是一个noob问题。

Answer 1

这真的很容易。在modal.html中保存模态html代码：

<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
<h4 class="modal-title">  title  </h4> 
</div> 
<div class="modal-body"> 
<p>  body  </p> 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
<button type="button" class="btn btn-primary">Save changes</button> 
</div> 
</div> 
</div> 
</div>

1.您可以使用iframe并将其放入模态内容位置。

像这样：

<iframe src="myModal.html"></iframe>

2.或者如果你只想用Jquery做这个，你可以使用加载函数：

$('#container').load('myModal.html', function(data) { 
     $('#myModal').modal('show');
});

Answer 2

你应该看看jQuery modal接受html作为内容。比如“myModal01.html”

有没有办法让我使用html文件中的模板并在bootstrap模式中使用它？

2 个答案: