Php 在视图中动态插入引导模式部分视图
我有一个bootstrap 2.32模态形式,有点长(见下文)。我想将其实现为一个单独的部分视图,动态插入另一个视图的HTML中(为了可维护性),但我不确定具体如何实现。我正在使用Codeigniter 2.1 主视图的按钮为:Php 在视图中动态插入引导模式部分视图,php,jquery,twitter-bootstrap,codeigniter,Php,Jquery,Twitter Bootstrap,Codeigniter,我有一个bootstrap 2.32模态形式,有点长(见下文)。我想将其实现为一个单独的部分视图,动态插入另一个视图的HTML中(为了可维护性),但我不确定具体如何实现。我正在使用Codeigniter 2.1 主视图的按钮为: <div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activ
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
以下是我想作为局部视图单独存储的内容:
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<fieldset>
<!-- Form Name -->
<legend>modalForm</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="user">User</label>
<div class="controls">
<input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="old">Old password</label>
<div class="controls">
<input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="new">New password</label>
<div class="controls">
<input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="repeat">Repeat new password</label>
<div class="controls">
<input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
<a href="#" class="btn" data-dismiss="modal">Nah.</a>
</div>
</div>
您可以在需要加载“部分”视图的视图中的任何位置执行此操作
$this->load->view('modal_view');
编辑:加载动态内容
在本例中,我将使用jqueryajax调用动态检索视图
在您的视图中,必须包含一个目标div来插入AJAX响应
<div id="modal_target"></div>
是的,但是我如何动态地插入模态,仅当按下按钮时?我所看到的唯一的例子是模式文本已经在基本视图中,但在激活之前隐藏。按钮被按下。
此隐藏使模式仅在按下按钮时可见,并在关闭时隐藏。如果您真的想动态加载它,我可以编辑响应以使用AJAX加载它,但设计过度了问题。最后,您将在文档中添加html。我知道,拥有部分视图的主要原因是为了维护和分离,所以我很想看看您如何使用JS
<button type="button" class="btn btn-primary btn-medium" onclick="get_modal();" >Show Modal</button>
<script type="text/javascript">
function get_modal(){
$.ajax({
type : 'POST',
url : '<?php base_url() ?>controler/get_modal',
cache : false,
success : function(data){
if(data){
$('#modal_target').html(data);
//This shows the modal
$('#form-content').modal();
}
}
});
}
</script>
public function get_modal()
{
$this->load->view('modal_view');
}