php - 如何在 yii2 中将默认登录页面显示为模式弹出窗口？

Question

谁能告诉我如何将默认登录页面提升为 yii2 中的模型弹出窗口？

谢谢

Answer 1

登录链接

<a href="javascript:void(0);" onclick="login();return false;">Login</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<script>
   function login(){
      $.ajax({
          type:'POST',
          url:'index.php?r=site/login',
          success: function(data)
                   {
                       $('#myModal').html(data);
                       $('#myModal').modal();
                   }
      });
   }
</script>

在控制器中（站点控制器/登录操作）

return $this->renderAjax('_login', [
    'model' => $model,
]);

您必须创建一个部分文件

部分视图_login.php

<?php 
    use yii\helpers\Html;
    use yii\widgets\ActiveForm;
?>
<!-- modal dialog for display pop up login -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" ><span aria-hidden="true">&    times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">Login</h4>
</div>
<div class="modal-body">
    <!-- start ActiveForm -->
    <?php $form = ActiveForm::begin(['id' => 'login-form','enableClientValidation'=>'true']); ?>

    <?= $form->field($model, 'username',[
                                  'template' => "{label}\n{error}\n{input}\n{hint}\n",
                                  'errorOptions'=>['class'=>'help-block alert alert-danger','style'=>'display:none;']
                             ]
                    ) ?>
    <?= Html::a('Forgot your password?', ['site/repassword'],['class'=>'password-recovery']) ?>
    <?= $form->field($model, 'password',[
                   'template' => "{label}\n{error}\n{input}\n{hint}\n",
                   'errorOptions'=>['class'=>'help-block alert alert-danger','style'=>'display:none;']
                ])->passwordInput() ?>
   <div class="modal-footer">
   <div class="form-group our-form-group">
         <?= Html::a('Sign up', ['site/signup']) ?>
         <?= Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
   </div>
   <?php ActiveForm::end(); ?>
</div>
</div>
</div>

Answer 2

http://getbootstrap.com/javascript/#modals-usage

<a data-toggle="modal" href="<?= Url::toRoute(Yii::$app->user->loginUrl) ?>" data-target="#modal">Login</a>

并在行动中使用renderPartial()