Show more than one modal on the same page

Yii 2.0 General Discussions
1

HI,

How can I show more than one(overlay) modal on the same page?

I now I must change the id of the modal, but how to do that from the view.

I use this code to show the modal.

in main.php (layout)




<?php yii\bootstrap\Modal::begin([

        'options' => [

            'id' => 'modalDialog',

         ],

        'size' => 'modal-lg',

        'header' => '<h4 id="modalTitle">Edit...</h4>',

        'footer' =>

            Html::button('Close', ['class' => 'btn btn-default', 'data-dismiss' => 'modal'])

            . PHP_EOL .

            Html::button('Save', ['class' => 'btn btn-primary btn-modal-save', 'id' => 'saveModel'])

            . PHP_EOL .

            Html::button('Delete', ['class' => 'btn btn-danger btn-modal-delete', 'id' => 'deleteModel']),

        ]); ?>

    

    <div id='modalContent'></div>

        

    <?php yii\bootstrap\Modal::end() ?>

And to show the modal.

In the view




 <?= Html::a('Create Project', false, [ 'class' => 'createModel btn btn-success' ]) ?>


<?php

$script = <<< JS


$(document).on('click', '.createModel', function(e){

    

    e.preventDefault();

    $.ajax({

        url: '/project/edit',

        type: 'POST',

        success: function(data) {

            $('#modalDialog')

            .modal('show')

            .find('#modalContent')

            .html(data);

            document.getElementById('modalTitle').innerHTML = '<h4>' + 'Create project' + '</h4>';            

        }

    });

});

Thx.

2

Hi!

The code I use to show the modal is this:




$(function(){

	$('#modalButton').click(function(){

		$('#modal').modal('show')

			.find('#modalContent')

			.load($(this).attr('value'));

	});

});

Where


 $('#modal').modal('show')

is where it show the modal to the user. Just change the #modal to the modal Id you need to show.

3

Thx Contreras,

This code works for showing one model to be open, but the second one the page will overwrite the first one.

I want to open more than one modal window on the same page (as overlay).

4

Can’t you just copy the JS to have 2 or more modals?


$(function(){

        $('#modalButton1').click(function(){

                $('#modal1').modal('show')

                        .find('#modalContent1')

                        .load($(this).attr('value'));

        });

        $('#modalButton2').click(function(){

                $('#modal2').modal('show')

                        .find('#modalContent2')

                        .load($(this).attr('value'));

        });

});