我正在尝试modal
使用以下代码在Twitter Twitter Bootstrap中显示远程内容:
<ol class="breadcrumb text-right">
<li><a data-target="#modal" data-toggle="modal" data-remote="/app_dev.php/resetting/request" href="#">Forgot password?</a></li>
<li><a data-target="#modal" data-toggle="modal" data-remote="/app_dev.php/registro" href="#">Register</a></li>
</ol>
<div aria-hidden="true" aria-labelledby="modalLabel" role="dialog" tabindex="-1" id="modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="myModalLabel" class="modal-title">Alert</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
当我单击任何触发模式的链接时,如下图所示:
但是,当内容加载时,我丢失了模式设置,而远程内容替换了完整的模式布局,如下图所示:
我做错了什么?
查看由远程调用生成的代码
加载后,我会仔细查看模态,只是<div class="modal-header">...</div>
消失而已,我不知道原因。这是模式加载远程内容后的代码:
<div aria-hidden="false" aria-labelledby="modalLabel" role="dialog" tabindex="-1" id="modal" class="modal fade in" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<form id="fos_user_resetting_request" class="fos_user_resetting_request form_registro" method="POST" action="/app_dev.php/resetting/send-email">
<h2>Solicitar nueva contraseña</h2>
<div>
<label for="username">Nombre de usuario:</label>
<input type="text" required="required" name="username" id="username">
<input type="submit" value="Restablecer contraseña" id="reset_btn">
</div>
</form>
<script>
$(document).ready(function() {
$("#fos_user_resetting_request").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
cache: false,
url: "/resetting/send-email",
data: $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
});
});
</script>
</div>
</div>
</div>
有什么建议吗?
默认情况下,它将内容设置为“ modal-content”类。您可以使用ajax调用在“模型主体”类上设置内容,也可以在远程函数中返回以下代码,然后它将自动设置模型框。
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="myModalLabel" class="modal-title">Alert</h4>
</div>
<div class="modal-body">
-- YOUR FORM ITEMS --
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句