将引导模式部分视图动态插入到视图中 - Dynamically inserting a bootstrap modal partial view into a view

Dynamically inserting a bootstrap modal partial view into a view

本文关键字：视图动态插入模式部 | 更新日期: 2023-09-27

我有一个有点长的引导 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, 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');

编辑：加载动态内容

在此示例中，我将使用 jQuery AJAX 调用来动态检索视图。

在您的视图中，您必须包含一个目标div 才能插入 AJAX 响应。

<div id="modal_target"></div>

用于加载模式并显示的按钮。

<button type="button" class="btn btn-primary btn-medium" onclick="get_modal();" >Show Modal</button>

神奇的JavaScript函数

<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>

您还必须在控制器中包含在 AJAX 中调用的函数

public function get_modal()
{
    $this->load->view('modal_view');
}