yii2如何加载远程Modal内容

Question

我一直在尝试在同一个 yii2 视图上为不同的引导模式加载远程内容

<?php
    $label  = $model->getAttributeLabel('educationId');
    $addon = [
        'prepend' => [
            'content' => Html::icon('book')
        ],
        'append' => [
            'content' => Html::button(
                Html::icon('plus'), [
                    'class' => 'btn btn-success',
                    'title' => 'Add New' . $label,
                    'onclick' => new JsExpression('showModal();'),
                ]
            ),
            'asButton' => true
        ]
    ];
    echo  Html::tag('label',$model->getAttributeLabel('educationId'), ['class'=>'control-label']);
    echo Select2::widget([
        'model' => $model,
        'attribute' => 'educationId',
        'data' => ArrayHelper::map ( EducationLevel::find ()->all (), 'id', 'name' ),
        'options' => ['placeholder' => 'Select Education Level ...','template' => 'label}\n{error}'],
        'addon' => $addon,
        'pluginOptions' => [
            'maximumInputLength' => 10
        ],
    ]);

JS函数

Function showModal(){
    $('#addEducationModal').modal({
        remote: 'modal.html',
        show: true
    });
}

所以用户点击一个文本域的插件按钮，模态框就会出现，其他文本域应该有相同的机制，不同的模态内容。

但是我得到的只是褪色的背景。

Answer 1

我能够让它发挥作用，而且不止于此。

我遇到的问题主要是因为 yii 对生成的文件进行了兑现，所以为了解决我删除了生成的文件并确保内容是新生成的 :)

我还没有使用过 JQuery 加载函数。

见以下代码：

PHP查看代码

        $label  = $model->getAttributeLabel('majorId');
        $addon = [
        'prepend' => [
        'content' => Html::icon('book')
        ],
        'append' => [
        'content' => Html::button(Html::icon('plus'), [
                'class' => 'btn btn-success',
                'title' => 'Add New' . $label ,
                'data-toggle' => 'modal',
                'data-target' => '#addModal',
                'href'=> 'addMajorModal.html',
                ]),
                'asButton' => true
                ]
                ];
        echo  Html::tag('label',$model->getAttributeLabel('majorId'),['class'=>'control-label']);
        echo Select2::widget([
                'model' => $model,
                'attribute' => 'majorId',
                'data' =>ArrayHelper::map ( Major::find ()->all (), 'id', 'name' ),
                'options' => ['placeholder' => 'Select Major ...','template' => 'label}\n{error}'],
                'addon' => $addon,
                'pluginOptions' => [
                'maximumInputLength' => 10
                ],
                ]);

<div class="modal fade" id="addModal" >
  <div class="modal-dialog" dir="rtl">
    <div class="modal-content" dir="rtl">
                <!-- Content will be loaded here from "addMajorModal.html" file -->
            </div>
        </div>
    </div>

模态文件内容

 <div class="modal-header panel-primary" dir="rtl" horizantal-aligned="">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">إضا�ة جديد</h4>
      </div>
      <div class="modal-body" dir="rtl">
        <div id="login-boxs" class="login-popup>
           <form id="newCat" method="post" class="signin" dir="rtl" action="#">
               <div class="form-group">
                    <label for="certName" class="control-label">مسمى التخصص </label>
                    <input type="text" name="name" data-val="true" data-val-required="ErrMsg" data-rule-required="true" placeholder="مسمى الشهادة" class="form-control" id="certName">
               </div>
                <div class="form-group">
                    <label for="certShortDesc" class="control-label">وص� قصير </label>
                    <input type="text" name="shdesc"  data-rule-required="true" placeholder="وص� قصير" class="form-control" id="certShortDesc" required>
               </div>
          </form>
                            </div>
      </div>
      <div class="modal-footer" dir="rtl">
      <div class="col-lg-6" dir="rtl">
        <div class="progress" >
                       <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" id="progresBarUpload">       
                       </div>
                   </div>
      </div>
      <div class="col-lg-6" dir="rtl">
      <button type="button" class="btn btn-danger" dir="rtl" data-dismiss="modal"><i class="glyphicon glyphicon-remove"> </i>Close</button>
        <button id="submitButton" type="button" dir="rtl" class="btn btn-primary" onclick="createCertificate()"><i class="glyphicon glyphicon-ok"> </i>Save changes</button>

      </div>

              </div>

就是这样，模态框将基于 yii 附加生成的 HTML 被加载

据我所知，这在 Bootstrap 3.3 之前都可以使用，因为远程内容将在版本 4 中被弃用