Question

大家好我想建立一个带模态登录的NavBar。我已经尝试过这种方式，但它适用于HTML :: button尝试使用 HTML :: a 不起作用，但它应该是。

工作

Html::button('Create ', ['value' => Url::to(['user/security/login']), 'title' => 'Creating New Company', 'class' => 'btn btn-success','id' =>'modalButton']); ?>

的 Ajax.js

$(function(){
	$('#modalButton').click(function(){
				$('#modal').modal('show')
			
                    .find('#modalContent')
                    .load($(this).attr('value'));
        
    });
     
});

的模态

<?php
Modal::begin([
    'header' => '<h2>Accedi</h2>',
    /*'toggleButton' => ['label' => 'click me'],
      'headerOptions' => ['id' => 'modalHeader'],*/
    'id' => 'modal',
    'size' => 'modal-sm',
    //keeps from closing modal with esc key or by clicking out of the modal.
    // user must click cancel or X to close
    'clientOptions' => ['backdrop' => 'static', 'keyboard' => FALSE]
]);

echo "<div id='modalContent'></div>";

Modal::end();
?>

控制器

 public function actionLogin()
    {
        if (!Yii::$app->user->isGuest) {
            $this->goHome();
        }

        /** @var LoginForm $model */
        $model = Yii::createObject(LoginForm::className());
        $event = $this->getFormEvent($model);

        $this->performAjaxValidation($model);
        $this->trigger(self::EVENT_BEFORE_LOGIN, $event);


        if ($model->load(Yii::$app->getRequest()->post()) && $model->login()) {
            $this->trigger(self::EVENT_AFTER_LOGIN, $event);
            return $this->goBack();
        }else {

        return $this->renderAjax('login', [
            'model'  => $model,
            'module' => $this->module,
        ]);
    }
}

我想

Nav::widget([
        'options' => ['class' => 'navbar-nav navbar-right'],
        'encodeLabels' => false,
        'items' => [
            ['label' => 'Home', 'url' => ['/site/index']],     
		
            Yii::$app->user->isGuest ? (
			echo Html::a('<span class="glyphicon glyphicon-user" aria-hidden="true"></span>Sign in</span>',
 ['#'],
 ['id' => 'modalButton',
 'class' => 'linkbutton',
 'data-toggle'=>'modal',
 'data-tooltip'=>'true',
 'title'=> 'Votes']);

但不要工作

你可以帮帮我吗？ **

Answer 1

无需锚标记，您可以使用标签本身。

 echo Nav::widget([
    'options' => ['class' => 'navbar-nav navbar-right'],
    'encodeLabels' => false,
     .
     .
     .
     .
    ['label' => '<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Sign in', 'url' => ['/user/security/login'],'options' => ['id' => 'modalButton']] :
    .
    .
     ]);

<强> JS

$this->registerJs(
    "$(function() {
       $('#modalButton a').click(function(e) {
       e.preventDefault();
       $('#modalLarge').modal('show')
         .find('.modal-content')
         .load($(this).attr('href'));
      });
     });", 
yii\web\View::POS_END, 'login-modal');

<强>模态

yii\bootstrap\Modal::begin(['id'=>'modalLarge', 'size' => 'modal-lg']);
yii\bootstrap\Modal::end();

NavBar小部件使用模态Yii2登录

1 个答案: