Всплывающая форма

popup
Нужный и необходимый сейчас инструмент — это всплывающая форма, например заказа звонка…



Здесь у нас рабочие файлы, картинки, стили div-ов не представлены, представлена только общая конструкция:

1. файл index.php


<!--шапку пропускаю-->

   <link rel="stylesheet" type="text/css" href="css/index.css"/>
   <script src="js/jquery.min.js" type="text/javascript"></script>
</head>
  <body>
  
 <script type="text/javascript">
 //всплывающая форма
$(function() {
   $('#popup').hide(); // скрыли фон и всплывающее окно
  $('#hide-layout').css({opacity: .5}); // кроссбраузерная прозрачность
  alignCenter($('#popup')); // центрировали окно
  $(window).resize(function() {
     alignCenter($('#popup')); // центрирование при ресайзе окна
  })
   $('.click-me').click(function() {
     $('#hide-layout, #popup').fadeIn(300); // плавно открываем
  })
   $('#btn-close, #hide-layout').click(function() {
     $('#hide-layout, #popup').fadeOut(300); // плавно скрываем
  })
   $('#btn-yes, #btn-no').click(function() {
     alert('Выполнили какое-то действие, затем скрываем окно...'); // сделали что-то...
     $('#hide-layout, #popup').fadeOut(300); // скрыли
  })
   // функция центрирования
  function alignCenter(elem) {
     elem.css({
       left: ($(window).width() - elem.width()) / 2 + 'px', // получаем координату центра по ширине
      top: ($(window).height() - elem.height()) / 2 + 'px' // получаем координату центра по высоте
    })
   }
 })
 </script>

<!--Всплывающее окно--> 
 <div id="popup" class="popup" style="display:none;">
 <!--<img id="img1" src="/images/imageop8.png" width="731px" height="468px">-->
  <div class="clearfix colelem" id="u10">
      <h2>ОФОРМИТЬ ЗАКАЗ</h2>
     </div>
     <div class="clearfix colelem" id="u12">
      <p>Оставьте контактную информацию и наши менеджеры свяжутся с вами в течении часа для подтверждения заказа.</p>
     </div>

<!--форма-->
 <input type="text" name="name" id="formname" placeholder="Ваше имя*">
 <input type="text" name="email" id="formnemail" placeholder="E-mail*">
 <input type="text" name="tel" id="formtel" placeholder="Телефон*">
    
 <button class="u16" value="ОТПРАВИТЬ" onclick="fout()">ОТПРАВИТЬ</button>
 <!--тут через JS можно прикрепить отправку на почту -->

<div class="btn-close" onclick="zakr();"></div> 
 </div> 
 <!--  -->


 <!--для появления всплывающего окна--> 
   <div id="page">
 <div class="click-me" id="u1">test</div>
   </div>
   
 <!--Затемнение для всплываещего окна, можно прописать в футер, прямо к тегу body-->
 <div id="hide-layout" class="hide-layout" style="display:none;"></div>

   </body>
 </html>



2.файл CSS:

/*Всплывающее окно*/
 .open-popup{
 color:#3f92b2;
 cursor: pointer;
 }

.open-popup:hover{
     color: #d2691e;
 }

.hide-layout {
   background: #000; /* фон */
   bottom: 0;  /* координата снизу */
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* прозрачность для IE */
   height: 100%; /* высота на всю страницу */
   opacity: 0.5;  /* прозрачность слоя */
   position: fixed; /* фиксируем элемент на странице*/
   top: 0; /* координата сверху */
   width: 100%; /* ширина на всю страницу */
   z-index: 998; /* z-index для перекрытия остальных элементов */
 }

.popup{
 /* background:url("../images/backgroundop.png") no-repeat;  */
 backgroud-color:green;
 width:1037px;
 height:619px;
 position: fixed;
 z-index: 999;
 }


 .btn-close{
 z-index:200px;
 position: absolute;
 background:url("../images/close.png") no-repeat;
 cursor:pointer;
 top: 20px;
 left: 990px;
 width: 25px;
 height: 24px;
 }

.btn-close:hover{
 background:url("../images/close.png") no-repeat;
 background-position: 0 -25px;
 }


 

Оставить комментарий