Exebeche
@Exebeche
Осваиваю программирование

Как понять поведение верстки в yii2?

Делаю сайт на 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">&copy; <?= 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 вставлялись не в него, а меню так и выше него располагалось... Да и пиджак я уже после того, как меню встроил, использовал...

Оно, конечно, можно условий написать для где отображать, а где нет и все подобные элементы фигануть в файл шаблона, но кажется, что это костыль под толстым слоем синей изоленты.....
  • Вопрос задан
  • 440 просмотров
Решения вопроса 1
Exebeche
@Exebeche Автор вопроса
Осваиваю программирование
Методами проб и ошибок, научного тыка и околонаучных теорий было установлено, что неадекватное поведение блоков было вызвано использованием библиотеки animate.css - именно в блоках с классами анимаций были "неадекватные поведения".
Убрал классы анимации и все встало на свои места... и модалки - умнички и блок с фильтрами становится куда нужно.

(:
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
webinar
@webinar Куратор тега Yii
Учим yii: https://youtu.be/-WRMlGHLgRg
1. Стоит решать проблему оторвано от yii, он тут не при чем. Скопируйте полученный html, закиньте в песочницу и дебажте, дайте ссылку на песочницу.
2. Я обычно делаю 1 модалку в layout, а в кнопке которая ее открывает храню инфо (в data атрибутах), по которому гружу в эту модалку контент. 1 раз скрипт написали и пользуемся по всему проекту.
3. Кстати бутстраповская модалка - это то еще приключение. Может стоит посмотреть в сторону alertifyjs.com - через него можно флеш сообщения выводить и модалки делать, короче удобная штука.
Ответ написан
Mx21
@Mx21
Software engineer
>блоки должны быть, только в layout?

Не обязательно вставлять код модального окна только в layout. Модальное окно, может быть и в views, только в одном каком-нибудь представлении. Все зависит от задачи. Но, обычно, модалку лучше размещать в layout'е, если данное окно присутствует на других страницах.

Вообще, лучше отходить от yii-шного js-а, pjax'a в том числе. Под модальные лучше ставить отдельный js-плагин.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы