daily pastebin goal
68%
SHARE
TWEET

Untitled

a guest May 16th, 2018 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- Html -->
  2.  
  3. <div class="popup-modal">
  4.     <div class="popup-window">
  5.         <form id="order-popup" class="form-order-popup" method="POST">
  6.             <div class="popup-close"></div>
  7.             <input type="text" name="name" placeholder="Ваше имя" required>
  8.             <input type="text" name="phone" placeholder="Ваш телефон" required>
  9.             <input class='popup-button' type="submit" value="Оставить заявку">
  10.         </form>
  11.     </div>
  12. </div>
  13.  
  14. <!-- Scss -->
  15.  
  16. .popup-modal {
  17.     z-index: 100;
  18.     display: none;
  19.     background-color: rgba(0,0,0, .5);
  20.     position: fixed;
  21.     top: 0;
  22.     left: 0;
  23.     width: 100%;
  24.     height: 100%;
  25.     .popup-window {
  26.         margin: 0 auto;
  27.         margin-top: 100px;
  28.         background-color: #fff;
  29.         width: 320px;
  30.         min-height: 260px;
  31.  
  32.     }
  33.  
  34.     .form-order-popup {
  35.         padding-top: 1px;
  36.         position: relative;
  37.         .popup-close {
  38.             content: '';
  39.             position: absolute;
  40.             top: 10px;
  41.             right: 10px;
  42.             background-image: url(../img/close.svg);
  43.             width: 20px;
  44.             height: 20px;
  45.             background-repeat: no-repeat;
  46.             background-size: cover;
  47.             cursor: pointer;
  48.         }
  49.         input {
  50.             margin: 0 auto;
  51.             width: 200px;
  52.             display: block;
  53.             margin-top: 40px;
  54.             padding-left: 10px;
  55.             height: 32px;
  56.             font-size: 16px;
  57.         }
  58.         .popup-button {
  59.             height: 36px;
  60.             color: #fff;
  61.             font-weight: bold;
  62.             background-color: $accent;
  63.             cursor: pointer;
  64.           text-transform: uppercase;
  65.           border: none;
  66.             transition: background-color,color .3s ease;
  67.             &:hover {
  68.                 color: #fff;
  69.                 background-color: #efaf00;
  70.             }
  71.            
  72.         }
  73.     }
  74. }
  75.  
  76. <!-- Js -->
  77.  
  78. $('.popup-button').click(function(event) {
  79.     $('.popup-modal').show("slow");
  80. });
  81.  
  82. $('.popup-close').click(function(event) {
  83.     $(".popup-modal").hide('slow');
  84. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top