我在尝试如何在Yii中的模态框中呈现表单时遇到了一些问题。
目前,我有以下代码,其中我刚刚获得了一个显示模式框的链接。
CHtml::link(' Email this Gift', '#', array(
'id' => 'giftModal',
'onclick'=>'js:bootbox.confirm("hello world")',
)
);
我真的需要在模态框中呈现一个表单。我该如何做到这一点,实际上我已经花了很长一段时间研究如何实现这一目标,但我显然一直在错误地搜索,所以如果有任何指导,我将不胜感激。
感谢
将您想要的内容放入隐藏的div中,在这种情况下,为了方便起见,我将表单放入其他视图中。
<!-- dialog contents on hidden div -->
<div id="modal-content" class="hide">
<div id="modal-body">
<!-- put whatever you want to show up on bootbox here -->
<?php
//example
$model = Category::model()->findByPk(1);
$this->renderPartial('//test/child-view', array('model'=>$model)) ?>
</div>
</div>
然后将消息传递到具有以上内容的引导框
<script>
$(function(){
bootbox.confirm($('#modal-body').html());
</script>
当你使用表单时,模态框的按钮在你的表单之外,你必须自定义一点以使你的表单正常工作。
示例当点击bootbox的"OK"按钮时,您调用脚本提交表单
$('my-form-selector').submit();
重要:因为在这段代码中,我从隐藏的div获得了HTML,所以有两个表单(一个在bootbox上,一个在隐藏的div上)。您必须添加类bootbox
作为表单元素的前缀,以指示您在引导框上操作的表单(在我的情况下,bootbox
只是由其自身库生成的类,并且是模态框上内容的父类,my-form-selector
可以是#form-id
、.form-class-name
等)
bootbox.confirm($('#modal-body').html(), function(result){
if(result){
console.log($('.bootbox my-form-selector').parent().parent()); //<--it should print the object of modal bootbox, it ensures the form is in modal box, not one on hidden div-->
$('.bootbox my-form-selector').submit();
}});
我认为您应该使用dialog
而不是confirm
,因为在那里您可以完全自定义模式框