Делаю сайт на yii2. Все хорошо, но... модальные окна нужны не на всех страницах - вставляю верстку в нужную вьюху и оно... не отображается.. оно срабатывает, но где-то очень глубоко и z-index его не вытягивает...
Подобная проблема и в других местах. Нужно блок сделать fixed к низу окна, а если прописать верстку не в laout то fixed не корректно срабатывает и прижимает блок к низу родителя.
В чем может быть проблема? Может быть я какую-то важную фишку упускаю или подобные блоки должны быть, только в layout?
Код шаблона layout:
use yii\bootstrap\Modal;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use frontend\assets\AppAsset;
use common\widgets\Alert;
use yii\helpers\Url;
use frontend\widgets\LoginFormWidget;
$session = Yii::$app->session;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<div id="p_prldr"><div class="contpre"><span class="svg_anm"></span><br>Please wait<br><small>page loading...</small></div></div>
<?php $this->beginBody() ?>
<div class="wrap">
<?php
NavBar::begin([
'id' => 'main-nav',
'brandLabel' => '<img src="/upload/logo.png" alt="DFW logo">',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-collapse',
],
]);
$menuItems = [
['label' => 'Main', 'url' => ['/site/index'], 'options' => ['class' => 'nav-item']],
['label' => 'Shop on-line', 'url' => ['/shop/index'], 'options' => ['class' => 'nav-item'], 'active' => $this->context->id == 'shop'],
['label' => 'Contacts', 'url' => ['/site/contact'], 'options' => ['class' => 'nav-item']],
];
if (Yii::$app->user->isGuest) {
$menuItems[] = ['label' => 'Login | Signup', 'url' => '#', 'options' => ['class' => 'auth']];
} else {
$menuItems[] = '<li>'
. Html::beginForm(['/site/logout'], 'post')
. Html::submitButton(
'Logout (' . Yii::$app->user->identity->username . ')',
['class' => 'btn btn-link logout']
)
. Html::endForm()
. '</li>';
}
echo Nav::widget([
'encodeLabels' => false,
'options' => ['class' => 'nav nav-stacked'],
'items' => $menuItems,
'activateParents' => false
]);
NavBar::end();
?>
<div class="container page-container col-md-12">
<?php if (Yii::$app->controller->id == 'shop' || Yii::$app->controller->id == 'cart'): ?>
<div id="shop-nav" class="shop-nav-wrap container-fluid">
<div class="shop-nav_top">
<button class='cmn-toggle-switch cmn-toggle-switch__htx'><span>toggle menu</span></button>
<ul class="shop-nav_top-menu">
<li><a href="<?= Url::to('/shop/sale') ?>">Sale</a></li>
<li><a href="<?= Url::to('/shop/new') ?>">New</a></li>
<li><a href="<?= Url::to(['/shop/category', 'id' => 1]) ?>">Clothes</a></li>
<li><a href="<?= Url::to(['/shop/category', 'id' => 2]) ?>">Shoes</a></li>
<li><a href="<?= Url::to(['/shop/category', 'id' => 3]) ?>">Accessories</a></li>
</ul>
</div>
<hr>
<div class="shop-nav_bottom">
<p <?= isset($session['cart.qty']) ? 'class="show-cart-top"' : '' ?> style="display: inline-block;"><i class="fas fa-shopping-bag"></i> <span><?= isset($session['cart.qty']) ? $session['cart.qty'] : 0 ?></span></p> <?= Yii::$app->user->isGuest ? '<i class="far fa-heart auth" aria-hidden="true"></i>' : '<p id="wish-list" style="display: inline-block;"><i class="far fa-heart" aria-hidden="true" style="display: inline-block; cursor: pointer;"></i></p>' ?>
<span>
<?= \Yii::$app->wishlist->getUserWishlistAmount(); ?>
</span>
</div>
</div>
<?php endif; ?>
<?= Alert::widget(); ?>
<?= $content ?>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-left">© <?= Html::encode(Yii::$app->name) ?> <?= date('Y') ?></p>
<p class="pull-right"><?= Yii::powered() ?></p>
</div>
</footer>
<!-- Authentication modal-->
<div class="modal modal-warning" id="modal-auth" style="display: none; padding-right: 10px; animation-delay: 2s">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h2 class="modal-title">Authentication</h2>
</div>
<div class="modal-body">
<dl class='tab horizontal'>
<?= (Yii::$app->user->isGuest ? LoginFormWidget::widget([]) : ''); ?>
</dl>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<?php if (Yii::$app->controller->id == 'shop'): ?>
<?php if (!(Yii::$app->user->isGuest)): ?>
<!-- Wishlist modal -->
<div class="modal modal-warning" id="modal-wish-list" style="display: none; padding-right: 10px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h2 class="modal-title">Wish list</h2>
</div>
<div class="modal-body">
<?php $wishlist = Yii::$app->wishlist->getUserWishList();
foreach ($wishlist as $wish): ?>
<a class="mini-item col-md-4 col-sm-6 col-xs-12" href="<?= Url::toRoute(['shop/view', 'id' => $wish->id]); ?>">
<div>
<img src="<?= $wish->getImage()->getUrl('150x150') ?>" alt="">
<p>
<?= $wish->title ?>
</p>
<p>
<?= $wish->designer['brand_name'] ?>
</p>
<p>
<?= $wish->price ?>
</p>
</div>
</a>
<?php endforeach; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<?php endif; ?>
<?php Modal::begin([
'id' => 'cart',
'size' => 'modal-md',
'header' => '<h2>' . Yii::t("app", "Cart") . '</h2>',
'footer' => '<button type="button" class="btn btn-default" data-dismiss="modal">' . Yii::t("app", "Begin shopping") . '</button><a href="' . Url::to(["cart/view"] ) . '" class="btn btn-success">' . Yii::t("app", "Checkout") . '</a><button type="button" class="btn btn-danger" onclick="clearCart()">' . Yii::t("app", "Clear cart") . '</button>',
]);
Modal::end();
?>
<?php endif; ?>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Сюда вставил модалки и меню для одного раздела - так ведут себя правильно, но, если вставляю в вид шопа, то все блоки хотят быть, только в обертке (в данном случае shop-new)
Вид страницы:
<div class="shop-new col-md-12 animated bounceInLeft">
<h1>
New
</h1>
<?php Pjax::begin([
'id' => 'productList',
'enablePushState' => false,
'enableReplaceState' => false,
]); ?>
<?php $form = ActiveForm::begin([
'id' => 'filter-form',
'action' => 'new',
'method' => 'get',
'options' => ['data-pjax' => true],
]); ?>
<div class="new-sortFilter-nav status_chk">
<?php echo $this->render('_search', ['model' => $searchModel, 'categories' => $categories]); ?>
</div>
<?php ActiveForm::end();?>
<?= $this->render('_loop', ['dataProvider' => $dataProvider, 'searchModel' => $searchModel]); ?>
<?php Pjax::end(); ?>
</div>
Я бы погрешил на пиджак, но менюха магазина и модалки, до переноса в layout вставлялись не в него, а меню так и выше него располагалось... Да и пиджак я уже после того, как меню встроил, использовал...
Оно, конечно, можно условий написать для где отображать, а где нет и все подобные элементы фигануть в файл шаблона, но кажется, что это костыль под толстым слоем синей изоленты.....
