HTML редактор

<!doctype html>
<html lang="ru">
<head>
    <title>Использование control-modal.js для динамического создания 2 модальных окон</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<h1 class="h3 text-center">Использование control-modal.js для динамического создания 2 модальных
        окон</h1>

<button class="btn btn-info modal-show-1" data-content="Содержимое...">Открыть модальное окно 1</button>

</div>

<script src="/examples/vendors/jquery/jquery-3.2.1.min.js"></script>

<script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script>

<script src="/examples/vendors/solution-for-bootstrap/control-modal.js"></script>

var showModal1 = false,
            showModal2 = false;

// создаём объект "Модальное окно 1"
        var myModal1 = new ModalApp.ModalProcess({
            id: 'myModal1',
            title: 'Заголовок модального окна 1',
            body: '<p>Некоторый текстовый контент 1 модального окна...</p>' +
            '<button class="btn btn-info modal-show-2">Открыть модальное окно 2</button>'
        });
        myModal1.init();

// создаём ещё один объект "Модальное окно 2"
        var myModal2 = new ModalApp.ModalProcess({
            id: 'myModal2',
            title: 'Заголовок модального окна 2',
            body: '<p>Некоторый текстовый контент 2 модального окна...</p>'
        });
        myModal2.init();

/* Определяем поведение окон */
        // при нажатии на кнопку с классом modal-show-1 открываем myModal1
        $('.modal-show-1').click(function () {
            myModal1.showModal();
        });
        // при нажатии на кнопку с классом modal-show-2 открываем myModal2
        $('.modal-show-2').click(function () {
            showModal2 = true;
            myModal1.hideModal();
        });

$('#myModal1').on('hidden.bs.modal', function (e) {
            if (showModal2) {
                showModal2 = false;
                window.setTimeout(function () {
                    myModal2.showModal();
                }, 400);
            }
        });

$('#myModal2').on('hidden.bs.modal', function (e) {
            window.setTimeout(function () {
                myModal1.showModal();
            }, 400);
        });
    });
</script>
</body>
</html>