Javascript-форум - JS В bootstrap модальное окно

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - JS В bootstrap модальное окно (https://javascript.ru/forum/jquery/34250-js-v-bootstrap-modalnoe-okno.html)

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,

Исправленный код написан в сообщении выше.

подскажите пожалуйста как сделать так чтобы при клике на ссылку открывалось модальное окно с затемнением экрана, но при клике вне области модального окна(по затемнению), модальное окно не закрывалось