Как правильно работать в yii2 c bootstrap\modal?

1
2
3
4
5

registerCssFile('@web/css/bootstrap.min.css');
$this->registerJsFile('@web/js/jquery.min.js');
$this->registerJsFile('@web/js/bootstrap.min.js');

?>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);

Modal::begin([
    'header' => 'Hello World',
    'id' => 'myModal',
]);

echo 'Modal Content Here';

Modal::end();

?>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);

Modal::begin([
    'header' => 'Hello World',
    'id' => 'myModal',
]);

echo 'Modal Content Here';

echo Html::button('Close Modal', ['class' => 'btn btn-danger', 'data-dismiss' => 'modal']);

Modal::end();

?>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);

Modal::begin([
    'header' => 'Hello World',
    'id' => 'myModal',
]);

echo '';

Modal::end();

// Load content dynamically through AJAX
$script = <<< JS
$(document).on('click', '#dynamicButton', function(){
    $.ajax({
        method: 'get',
        url: '/site/modal-content',
        success: function(data){
            $('#modalContent').html(data);
        }
    });
});
JS;

$this->registerJs($script);

?>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);

Modal::begin([
    'header' => 'Hello World',
    'id' => 'myModal',
]);

echo '';

echo Html::button('Save', ['class' => 'btn btn-success', 'id' => 'saveButton']);

echo Html::beginForm(['site/modal-save'], 'post', ['id' => 'modalForm']);
echo Html::textInput('name');
echo Html::endForm();

Modal::end();

// Submit form data through AJAX
$script = <<< JS
$(document).on('click', '#saveButton', function(){
    $.ajax({
        method: 'post',
        url: '/site/modal-save',
        data: $('#modalForm').serialize(),
        success: function(data){
            $('#modalContent').html(data);
        }
    });
});
JS;

$this->registerJs($script);

?>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

 'myModal',
    'header' => 'Hello World',
    'size' => 'modal-lg', // 'modal-sm', 'modal-md', or 'modal-lg'
    'toggleButton' => ['label' => 'Open Modal', 'class' => 'btn btn-primary'],
    'footer' => Html::button('Save', ['class' => 'btn btn-success', 'id' => 'saveButton']),
];

echo Modal::widget($options);

?>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);

Modal::begin([
    'header' => 'Hello World',
    'id' => 'myModal',
    'clientOptions' => [
        'show' => new yiiwebJsExpression("function(event) { console.log('Modal Opened'); }"),
        'hide' => new yiiwebJsExpression("function(event) { console.log('Modal Closed'); }"),
    ],
]);

echo 'Modal Content Here';

echo Html::button('Close Modal', ['class' => 'btn btn-danger', 'data-dismiss' => 'modal']);

Modal::end();

?>