Модальное окно

[ineedhlw]

сайт лежит на локальном сервере. на сайте имеется кнопочка, по нажатию на которую выползает модальное окно, содержащее небольшую формочку.

 

 

но когда я закрываю модальное окно, то URL становится таким: http://localhost/index.html#close, а при обновлении страницы

происходит как бы моментальное открытие модального окна и сразу его закрытие. ну, будто он уже открыт был. нужно чтобы не было такого момента, что он после обновления страницы вызывает-закрывает модальное окно...
как исправить?

CSS:

/* Контейнер */.modal {/* Слой перекрытия */position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);z-index: 10000;/* Трансформации прозрачности при открытии  */-webkit-transition: opacity 500ms ease-in;-moz-transition: opacity 500ms ease-in;transition: opacity 500ms ease-in;/* Скрываем изначально */opacity: 0;pointer-events: none;}/* Показываем модальное окно */.modal:target {opacity: 1;pointer-events: auto;}/* Содержание */.modal > div {width: 500px;background: #fff;position: relative;margin: 10% auto;/* По умолчанию минимизируем анимацию */-webkit-animation: minimise 500ms linear;/* Придаем хороший вид */padding: 50px;-moz-border-radius: 7px;border-radius: 7px;-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);box-shadow: 0 3px 20px rgba(0,0,0,0.9);background: -moz-linear-gradient(#fff, #ccc);background: -webkit-gradient(linear, right bottom, right top, color-stop(1, rgb(255,255,255)), color-stop(0.57, rgb(230,230,230)));text-shadow: 0 1px 0 #fff;}/* Изменяем анимацию при открытии модального окна*/.modal:target > div {-webkit-animation-name: bounce;}.modal h2 {font-size: 36px;padding: 0 0 20px;}@-webkit-keyframes bounce {  0% {  	-webkit-transform: scale3d(0.1,0.1,1);  	-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);  }  55% {  	-webkit-transform: scale3d(1.08,1.08,1);  	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);  }  75% {  	-webkit-transform: scale3d(0.95,0.95,1);  	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);  }  100% {  	-webkit-transform: scale3d(1,1,1);  	-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);  }}@-webkit-keyframes minimise {  0% {  	-webkit-transform: scale3d(1,1,1);  }  100% {  	-webkit-transform: scale3d(0.1,0.1,1);  }}/* Ссылка на кнопку Закрыть */.modal a[href="#close"] {position: absolute;right: 0;top: 0;color: transparent;}/* Сбрасываем изменения */.modal a[href="#close"]:focus {outline: none;}/* Создаем кнопку Закрыть */.modal a[href="#close"]:after {content: 'X';display: block;/* Позиционируем */position: absolute;right: -10px;top: -10px;width: 1.5em;padding: 1px 1px 1px 2px;/* Стили */text-decoration: none;text-shadow: none;text-align: center;font-weight: bold;background: #000;color: #fff;border: 3px solid #fff;-moz-border-radius: 20px;border-radius: 20px;-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);box-shadow: 0 1px 3px rgba(0,0,0,0.5);}.modal a[href="#close"]:focus:after,.modal a[href="#close"]:hover:after {-webkit-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);}.modal a[href="#close"]:focus:after {outline: 1px solid #000;}/* Открываем модальное окно */a.openModal {margin: 1em 10px;display: block;width: 150px;background: #ccc;text-align: center;padding: 10px;-moz-border-radius: 7px;border-radius: 7px;background: -moz-linear-gradient(#fff, #ddd);background: -webkit-gradient(linear, right top, right bottom, from(rgb(255,255,255)), to(rgb(230,230,230)));text-shadow: 0 1px 0 #fff;border: 1px solid rgba(0,0,0,0.1);-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3);box-shadow: 0 1px 1px rgba(0,0,0,0.3);}a.openModal:hover,a.openModal:focus {background: -moz-linear-gradient(#fff, #ccc);background: -webkit-gradient(linear, right top, right bottom, from(rgb(255,255,255)), to(rgb(200,200,200)));}#wrapper{    align:left;}

HTML:
 

 <div id="wrapper"><a href="#example" class="openModal">Написать сообщение</a>	<aside id="example" class="modal">		<div>			<h2>Жалобы и пожелания</h2>			<form action="send.php" method="POST">			                    <label>  <span style="padding-right:10px;">    <h3>Ваше имя:</h3>    </span> <input name ="yourname" type="text" required autofocus></label>										<div id="send">					<button align="center">						<img src="sendpicture.jpg" alt="Отправить" style="vertical-align:center">						</button>						</div>																									                        <label>  <span style="padding-right:10px;">   <h3>Ваше сообщение:</h3>   </span> <textarea name="textarea"  required cols="60" rows="7" maxlength="420"></textarea> </label>																		                        </form>											                                                                                                <a href="#close" title="Закрыть">Закрыть</a>		</div>	</aside>	</div>		                </div>

з.ы. модальное окно делал не собственноручно, я в нем вообще не разбираюсь.

[Q4Dizzy]

<script>

if(window.location.hash != '') {

var url = window.location.href.replace(/(.+)#.+$/g,'$1');

window.location = url;

}

</script>

[ineedhlw]

огромное вам спасибо, работает так, как я и хотел!
пока ждал ответ, начал смотреть видео от Sorex'а, буду обучаться вёрстке

   

Edited March 17, 2015 by ineedhlw

[ineedhlw]

а вот ещё проблема обнаружил, можно ли как-нибудь избавиться от такой "возможности"?

[Lure]

Нужно задать полю ввода сообщения max-width меньше размера модального окна, чтобы оно только по вертикали растягивалось.

[ineedhlw]

спасибо!