Question

我想在网站上有一个按钮，使用bootstrap打开模态视图。像这样：

<button class="btn btn-primary btn-lg" id="modalButton" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

因此，此按钮的目标是名为#myModal的视图。而不是从客户端html加载#myModal视图，我想向服务器发出一个AJAX请求以获取#myModal视图，因为视图将根据用户是否为admin而不同，并且该变量驻留在服务器上。

所以请求会是这样的：

$('#modalButton').click() -> 
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET","/modalFeedback",true);
  xmlhttp.send();

然后/ modalFeedback路由应检查用户是否为admin，并发回相应的#myModal视图。我对如何准确实现这一点感到困惑，更具体地说，如何从服务器返回#myModal视图，以便正常打开。

如果有人可以帮我一些非常有帮助的伪代码！

更新

我使用了bootstrap远程选项（见下面的答案），这是我称之为模态的方式：

a#uservoice_tab(data-toggle="modal", href="/modalFeedback.html", data-target="#myModal")
  img(src='/img/icon-idea.png')
// You need to have #myModal element in the same place you have the button. Bootstrap injects the body into this element remotely
#myModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')

以下是jade中的modalFeedback.html来源

.modal-dialog
    .modal-content
      .modal-header
        button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
        h4#myModalLabel.modal-title Modal title
      .modal-body
      .modal-footer
        button.btn.btn-default(type='button', data-dismiss='modal') Close
        button.btn.btn-primary(type='button') Save changes

Answer 1

由于您似乎正在使用引导程序，因此它实际上已内置此功能，因此您无需自己执行ajax调用。请查看modals的remote选项。

您返回的内容只需要是您希望位于模态内容中的HTML片段。

如果您正在使用express，如何为模态返回html的示例如下（使用jade作为模板引擎，但它可以是您喜欢的任何内容）：

app.set('view engine', 'jade');

app.get(
    '/modalFeedback'
    ,function(req, res, next){
        res.render('/modalFeedback.jade', { user: req.user });
    }
);

模板，在这种情况下modalFeedback.jade将只有html，无论如何都是html的jade版本，这是你希望在模态中显示的html。如果用户是管理员或其他什么，您甚至可以先简单地渲染模板而不是进行一些检查。根据检查，您可以选择要渲染的模板。关键是res.render，并获取文件传递给您提供的数据，并将其返回到模式的浏览器调用。

更新：remote自v3.3.0起为deprecated，已在v4中删除。（这可能更适合作为评论，但可能会被遗漏，因此将其放在此处以保护人们以后管理向后兼容性问题的时间）

Answer 2

我建议在html中保持空白模态div ..

<div id="modalbox" >
</div>
<button class="btn btn-primary btn-lg" id="modalButton" data-toggle="modal"       
data-target="#myModal">
 Launch demo modal
</button>

将ajax调用到服务器并返回基于admin或者模型框html内容字符串，并在模态按钮上单击并填充模态可见..

$('#modalButton').click() -> 
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","/modalFeedback",true);
xmlhttp.onreadystatechange=function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
  document.getElementById("modalbox").innerHTML=xmlhttp.responseText;
 }
}    
xmlhttp.send();
$("#modalbox").show();

如何从服务器返回html模态目标视图？

2 个答案: