动态地将引导模态局部视图插入视图 [英] Dynamically inserting a bootstrap modal partial view into a view
问题描述
我有一个bootstrap 2.32模态形式,这是一种长(见下文)。我想实现这作为一个单独的局部视图动态插入另一个视图的HTML(为了可维护性),但我不知道如何做到这一点。我使用Codeigniter 2.1。
I have a bootstrap 2.32 modal form which is kind of long ( see below ). I'd like to implement this as a separate partial view to be dynamically inserted in the HTML of another view ( for maintainability ), but I'm not sure exactly how to do this. I'm working with Codeigniter 2.1.
主视图的按钮是:
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
这里是我想分开存储为部分视图:
Here is what I'd like to store separately as a partial view:
<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>
推荐答案
您需要加载partial视图。
You can do this in any point into a view where you need to load the 'partial' view.
$this->load->view('modal_view');
编辑:载入动态内容
这个例子我将使用一个jQuery AJAX调用动态检索视图。
In this example I will use an jQuery AJAX call to retrieve the view dynamically.
在你的视图中,你必须包含一个目标div来插入AJAX响应。
In your view you have to include a target div to insert the AJAX response.
<div id="modal_target"></div>
加载模式并显示的按钮。
The button to load the modal and show.
<button type="button" class="btn btn-primary btn-medium" onclick="get_modal();" >Show Modal</button>
这是神奇的javascript功能
The javascript function that do the magic
<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>
您还必须在您的contoller中包含AJAX中调用的函数
You have also to include in your contoller the function called in AJAX
public function get_modal()
{
$this->load->view('modal_view');
}
这篇关于动态地将引导模态局部视图插入视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!