twitter-bootstrap 如何使用 yii2 -bootstrap 扩展将模态添加到 yii2 中的导航栏？

how can I add modal to navbar in yii2 using yii2 -bootstrap extension?

提问by user3441065

I'm trying to put modal in a navbar in my yii2 project. I'm using yii2-bootstrap extension.

我正在尝试将模态放在我的 yii2 项目的导航栏中。我正在使用 yii2-bootstrap 扩展。

Code for my nav:

我的导航代码：

        NavBar::begin([
            'brandLabel' => 'My Company',
            'brandUrl' => Yii::$app->homeUrl,
            'options' => [
                'class' => 'navbar-inverse navbar-fixed-top',
            ],
        ]);
        $menuItems = [
            ['label' => 'Home', 'url' => ['/site/index']],
            //['label' => 'facilities', 'url' => ['/facilities/index']],

        ['label' => 'Hotel',
        'items' => [
             ['label' => 'Facilities', 'url' => ['/facilities/index']],
           //  '<li class="divider"></li>',
         //    '<li class="dropdown-header">Dropdown Header</li>',
             ['label' => 'Cuisines', 'url' => ['/cuisines/index']],
        ],

         ]
        ];

        if (Yii::$app->user->isGuest) {
            $menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
        } else {
            $menuItems[] = [
                'label' => 'Logout (' . Yii::$app->user->identity->username . ')',
                'url' => ['/site/logout'],
                'linkOptions' => ['data-method' => 'post']
            ];
        }
        echo Nav::widget([
            'options' => ['class' => 'navbar-nav navbar-right'],
            'items' => $menuItems,
        ]);

        NavBar::end();


    ?>

code for modal:

模态代码：

<?php

Modal::begin([
    'header' => '<h2>Hello world</h2>',
    'toggleButton' => ['label' => 'click me'],
 ]);

 echo 'Say hello...';

 Modal::end();
?>

can anyone please tell me how to add this modal to navbar?

谁能告诉我如何将此模式添加到导航栏？

回答by Marcel Marnix

First place the modal with an id on your site/index

首先在您的站点/索引上放置带有 id 的模式

    <?php
     use yii\bootstrap\Modal;

     Modal::begin(['id' => 'modal',
        'header' => '<h2>Hello world</h2>']);

         echo "Say Hello...";

     Modal::end();
    ?>

Then create a jQuery action in your controller/SiteController

然后在您的控制器/站点控制器中创建一个 jQuery 操作

function actionShowmodal(){
    $js='$("#modal").modal("show")';
    $this->getView()->registerJs($js);        
    return $this->render('index');
}

Finally in views\layouts\main add the link in your Nav::wigdet

最后在 views\layouts\main 添加链接到你的 Nav::wigdet

['label' => 'Show Modal', 'url' => ['/site/showmodal']],

回答by Maksim Tikhonov

    $menuItems = [
        ['label' => 'Home', 'url' => ['/site/index']],
        //['label' => 'facilities', 'url' => ['/facilities/index']],

    ['label' => 'Hotel',
    'items' => [
         ['label' => 'Facilities', 'url' => ['/facilities/index']],
       //  '<li class="divider"></li>',
     //    '<li class="dropdown-header">Dropdown Header</li>',
         ['label' => 'Cuisines', 'url' => ['/cuisines/index']],
     // insert this line
         '<li><a data-toggle="modal" data-target="#modal" style="cursor: pointer;">Click me gently!</a></li>', 

    ],

     ]
    ];

And for the modal widget:

对于模态小部件：

 <?php

 Modal::begin([
   'header' => '<h2>Hello world</h2>',
   'toggleButton' => ['label' => 'click me'],
   'id' => 'modal', // <-- insert this modal's ID
 ]);
 echo 'Say hello...';

 Modal::end();

?>

?>