Виджет внутри dropdown bootstrap3

[uladzimir-miadzinski]

Пытаюсь сделать выпадающий список действий, каждое из которых открывает модальное окно. Не могу понять почему за пределами dropdown модалка открывается и работает, но внутри dropdown когда ставишь модалку, то при нажатии на кнопку, экран просто становится с серым фоном, как будто модальное окно не до конца открылось, а только фон от него появился.

пытаюсь это сделать внутри GridView.

[
        'headerOptions' => [
            'class' => 'text-center w-1',
        ],
        'contentOptions' => [
            'class' => 'text-center',
        ],
        'label' => '',
        'format' => 'raw',
        'value' => function($obj) {
            $buttons =
                '<div class="dropdown">
                    <button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <i class="fas fa-bars fa-fw text-primary mr-2"></i>Действия
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                        <li>';
            $buttons .= Html::a('<i class="fas fa-eye fa-fw text-info mr-2"></i>Просмотр', Url::to(['/comservice/dealer-phones/view', 'id' => $obj->id]), [
                'class' => 'btn-xs',
                'target' => '_blank',
                'data-pjax'=> '0',
            ]);
            $buttons .= '</li>
    <li>';
            $buttons .= ModalAjax::widget([
                'id' => 'updateDealerPhones',
                'header' => 'Редактировать контакт',
                'toggleButton' => [
                    'label' => '<i class="fas fa-pencil-alt fa-fw text-primary"></i>',
                    'data-target' => '#updateDealerPhones',
                    'class' => 'btn btn-sm btn-default pull-left'
                ],
                'size' => 'modal-lg',
                'url' => Url::to(['/comservice/dealer-phones/update', 'id' => $obj->id]), // Ajax view with form to load
                'ajaxSubmit' => true, // Submit the contained form as ajax, true by default
                'options' => ['class' => 'fade modal header-primary text-left'],
                'bodyOptions' => ['class' => 'modal-body'],
                'autoClose' => true,
                'pjaxContainer' => '#phonesPjaxContainer',
                'events' => [
                    ModalAjax::EVENT_MODAL_SUBMIT => new JsExpression("
                    function(event, data, status, xhr) {
                        if (status) {
                            pjaxReload('#phonesPjaxContainer');
                            alertSuccessOk('Телефон успешно сохранен!');
                            $(this).modal('toggle');                           
                        }
                    }
                "),
                ]
            ]);

            $buttons .= '</li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>';
            return $buttons;
}
]

вопрос основной, как использовать модальное окно внутри таких списков как https://getbootstrap.com/docs/3.3/components/#btn-dropdowns-sizing

[loveorigami]

Ну я вижу у тебя ошибку: ты насоздавал в цикле ModalAjax с одинаковым id = updateDealerPhones.

[loveorigami]

правильнее виджет вынести за грид

     echo    ModalAjax::widget([
               'selector' => 'a.btn', // all buttons in grid view with href attribute
                'size' => 'modal-lg',
                'options' => ['class' => 'fade modal header-primary text-left'],
                'bodyOptions' => ['class' => 'modal-body'],
                'autoClose' => true,
                'pjaxContainer' => '#phonesPjaxContainer',
            ]);

       Pjax::begin([
            'id' => 'phonesPjaxContainer',
            'timeout' => 5000,
        ]); 

     echo GridView::widget([
        'dataProvider' => $dataProvider,
        'columns' => [
              ......................
             // ссылки с нужным классом-селектором
            // <a class="btn" href="/site/update?id=10" title="Edit ID-10" data-scenario="hello">Hello</a>
        ],
    ]); 

    Pjax::end();

[uladzimir-miadzinski]

Спасибо, вы действительно правы! Получилось, вынеся модальное окно за пределы грида