JS В bootstrap модальное окно
<html> <head> <meta charset="utf-8" /> <title>test </title> <link href="css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript"> $('#myModal').modal('show'); </script> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button> <h3 id="myModalLabel">Заголовок модального элемента</h3> </div> <div class="modal-body"> <p>Некое изящное тело…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button> </div> </div> </head> <body> <a href="#myModal" role="button" class="btn" data-toggle="modal">Запустить демонстрацию модального элемента</a> </body> </html> Обновляю страницу и у меня вылезает окно без нажатия на кнопку. Как исправить, чтобы когда заходил на страницу была кнопка и при нажатии вылезало модальное окно? Полностью файлы: http://rghost.ru/42525271 офф сайт: http://bootstrap.veliovgroup.com/javascript.php#modals |
CYZ,
1) Необходимо для вашего диалога добавить style="display: none;" (в bootsrap есть для этого класс hide) 2) при инициализации в опциях указать show: false (т.е. не показывать сразу) <html> <head> <meta charset="utf-8" /> <title>test </title> <link href="css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript"> $(function () { $('#myModal').modal({show: false}); }); </script> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button> <h3 id="myModalLabel">Заголовок модального элемента</h3> </div> <div class="modal-body"> <p>Некое изящное тело…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button> </div> </div> </head> <body> <a href="#myModal" role="button" class="btn" data-toggle="modal">Запустить демонстрацию модального элемента</a> </body> </html> |
Добавите пожалуйста то что вы мне написали в готовый код.
|
CYZ,
Исправленный код написан в сообщении выше. |
подскажите пожалуйста как сделать так чтобы при клике на ссылку открывалось модальное окно с затемнением экрана, но при клике вне области модального окна(по затемнению), модальное окно не закрывалось
|
Часовой пояс GMT +3, время: 09:58. |