Запустить
<!doctype html> <html lang="ru"> <head> <title>Демонстрация использования скрипта control-modal.js</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="text-center"> <h2 class="h3 mt-4 mb-2">Видео</h2> <button class="btn btn-warning modal-show" data-title="Linux Sysadmin Basics - Course Introduction" data-content="<div class='embed-responsive embed-responsive-16by9'><iframe class='embed-responsive-item' src='https://www.youtube.com/embed/bju_FdCo42w?list=PLtK75qxsQaMLZSo7KL-PmiRarU7hrpnwK' allowfullscreen></iframe></div>"> Course Introduction </button> <button class="btn btn-warning modal-show" data-title="Basic Linux Access Control" data-content="<div class='embed-responsive embed-responsive-16by9'><iframe class='embed-responsive-item' src='https://www.youtube.com/embed/WhCIuGjhH-0?list=PLtK75qxsQaMLZSo7KL-PmiRarU7hrpnwK' allowfullscreen></iframe></div>"> Basic Linux Access Control </button> <h2 class="h3 mt-4 mb-2">Изображения</h2> <button class="btn btn-warning modal-show" data-title="Изображение черепахи" data-content="<img class='img-responsive center-block' src='/examples/images/carousel_1.jpg'>"> Изображение </button> <button class="btn btn-warning modal-show" data-title="Изображение черепахи" data-content="<img class='img-responsive center-block' src='/examples/images/carousel_2.jpg'>"> Ещё одно изображение </button> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.2.1.min.js"></script> <!-- Bootstrap --> <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script> <!-- control-modal --> <script src="/examples/vendors/solution-for-bootstrap/control-modal.js"></script> <script> $(function () { // создаём объект "Модальное окно" var myModal = new ModalApp.ModalProcess({id: 'myModal'}); myModal.init(); $(document).on('click', '.modal-show', function () { myModal.changeTitle($(this).attr('data-title')); myModal.changeBody($(this).attr('data-content')); myModal.showModal(); }); $('#' + myModal.id).on('hidden.bs.modal', function (e) { myModal.changeBody(''); }); }); </script> </body> </html>