Запустить
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Модальные окна</title> <!-- Bootstrap --> <link href="/examples/vendors/bootstrap-4.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="text-center"> <!-- Кнопка, открывающая модальное окно --> <button type="button" class="btn btn-primary modal-show-1" data-title="Название заголовка 1"> Открыть форму 1 </button> <!-- Кнопка, открывающая модальное окно --> <button type="button" class="btn btn-primary modal-show-2" data-title="Название заголовка 2"> Открыть форму 2 </button> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script> <!-- Bootstrap --> <script src="/examples/vendors/bootstrap-4.1/js/bootstrap.bundle.min.js"></script> <script src="/examples/vendors/solution-for-bootstrap/control-modal-b4.js"></script> <script> var myModal1 = new ModalApp.ModalProcess({ id: 'myModal1' }); var myModal2 = new ModalApp.ModalProcess({ id: 'myModal2' }); myModal1.init(); myModal2.init(); myModal1.changeBody('Содержимое модальное окна 1...'); myModal2.changeBody('Содержимое модальное окна 2...'); $('.modal-show-1, .modal-show-2').click(function (e) { e.preventDefault(); if ($(this).hasClass('modal-show-1')) { myModal1.changeTitle($(this).attr('data-title')); myModal1.showModal(); } else if ($(this).hasClass('modal-show-2')) { myModal2.changeTitle($(this).attr('data-title')); myModal2.showModal(); } }); </script> </body> </html>