RSS
Modal Window v1.0 by Fallen
При нажатии на ссылку плавно появляется окно + затемнение сайта! Дизайн выполнен на CSS3 и без картинок, за исключением крестика =) И так приступим к установке! Добавим div в котором будет скажем так жить затемнение сайта(т.е. наша маска). Если вы не хотите видеть затемнение вашего сайта, то ставить этот div не обязательно! Вставляем после тега <body> Code <div id="mask"></div> Далее подключим наш дизайн окон! В СSS вставляем Code #mask { <br> position: absolute; <br> left: 0; <br> top: 0; <br> z-index: 9000; <br> background-color: #000; <br> display: none; <br> } <br><br> .window { <br> position: fixed; <br> left: 0; <br> top: 0; <br> z-index: 9999; <br> } <br><br> .close { <br> float: right; <br> background: url('/img/close.png') center center no-repeat; <br> opacity: 0.6; <br> padding: 6px; <br> margin: 4px 4px 4px 8px; <br> cursor: pointer; <br> } <br><br> .close:hover { <br> opacity: 1; <br> } <br><br> .modal_block { <br> display: block; <br> width: 350px; <br><br> -moz-border-radius: 2px; <br> -webkit-border-radius: 2px; <br> border-radius: 2px; <br> -khtml-border-radius: 2px; <br> -o-border-radius: 2px; <br><br> border:10px solid rgba(0,0,0,0.1); <br> <br> -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.3), 0 0 7px rgba(0,0,0,0.3); <br> -moz-box-shadow: 0 0 7px rgba(0,0,0,0.3), 0 0 7px rgba(0,0,0,0.3); <br> box-shadow: 0 0 7px rgba(0,0,0,0.3), 0 0 7px rgba(0,0,0,0.3); <br> } <br><br> .modal_title { <br> display: block; <br> background: #597DA3; <br> padding: 6px; <br> color: #fff; <br> text-shadow:0 -0.7px 0 rgba(255,255,255,0.4), 0 0 4px rgba(0,0,0,0.4); <br> text-align:left; <br> border: 1px solid rgba(0,0,0,0.2); <br> } <br><br> .modal_content { <br> display: block; <br> background: #fff; <br> text-shadow:0 -0.7px 0 rgba(255,255,255,0.4), 0 0 4px rgba(0,0,0,0.4); <br> padding: 6px; <br> text-align:left; <br> border-left: 1px solid rgba(0,0,0,0.2); <br> border-right: 1px solid rgba(0,0,0,0.2); <br> } <br><br> .modal_footer { <br> display: block; <br> background: #F2F2F2; <br> border-top: 1px solid rgba(0,0,0,0.2); <br> padding: 2px; <br> height: 35px; <br> } <br><br> .modal_footer input[type="button"] { <br> text-shadow:0 -0.7px 0 rgba(255,255,255,0.4), 0 0 4px rgba(0,0,0,0.4); <br> opacity: 1; <br> cursor: pointer; <br> font-size: 11.3px; <br> float: right; <br> padding: 4px 13px 4px 13px; <br> border: 1px solid #45688E; <br> color: #fff; <br> -moz-border-radius: 1.7px; <br> -webkit-border-radius: 1.7px; <br> border-radius: 1.7px; <br> -khtml-border-radius: 1.7px; <br> -o-border-radius: 1.7px; <br><br> background: -webkit-linear-gradient(top, #597DA3, #597DA3); <br> background: -moz-linear-gradient(top, #597DA3, #597DA3); <br> background: -ms-linear-gradient(top, #597DA3, #597DA3); <br> background: -o-linear-gradient(top, #597DA3, #597DA3); <br><br> -webkit-box-shadow: 0 0 1px rgba(255,255,255,0.02), inset 0 0 1px #fff; <br> -moz-box-shadow: 0 0 1px rgba(255,255,255,0.02), inset 0 0 1px #fff; <br> box-shadow: 0 0 1px rgba(255,255,255,0.02), inset 0 0 1px #fff; <br> } <br> .modal_footer input[type="button"]:hover { <br> background: -webkit-linear-gradient(top, #7092B5, #597DA3); <br> background: -moz-linear-gradient(top, #7092B5, #597DA3); <br> background: -ms-linear-gradient(top, #7092B5, #597DA3); <br> background: -o-linear-gradient(top, #7092B5, #597DA3); <br><br> }<br> Стили мы задали, далее подключим скрипт который будет обрабатывать вывод нашего окна! Code <script src="/js/Get_element_modal_window_v1.0"></script><br> Теперь блок с содержимым нашего окна, вставляем этот код Code <div id="modal_1" style="display:none;" class="window" align="center"> <div class="modal_block"> <div class="modal_title"> Ваш заголовок окна <div class="close" title="Закрыть окно"></div> </div> <div class="modal_content"> Содержимое окна <div class="modal_footer"> <input type="button" value="Закрыть" class="close" title="Закрыть окно"> </div> </div> </div> Обратите внимание что для разных окон разный id="modal_1", если у вас будет другой id, то не забудьте прописать такое же название в ссылке. И последнее сама ссылка на окно: Code <a name="modal" href="#modal_1" title="Моё модальное окно">Гыыы, окошко</a> еперь настройки: name="modal" : Означает что окно будет модальным,прописывать обязательно! href="#modal_1" : Ссылка на наше окно, указывается через решетку #! Все готово! | |||||||||
| |||||||||
| |||||||||
