first

Виталий
1 parent e0635b75
Showing 2 changed files with 67 additions and 1 deletions Show diff stats
frontend/views/site/vacancies.php
frontend/web/css/vacancies.css
@@ -27,7 +27,28 @@ $(function () {
         });
     });", 3);
 ?>
-
+<script type="text/javascript">
+	$(document).ready(function() {
+		$('.special-talents-text-2-img').click( function(event){
+			event.preventDefault();
+			$('#overlay').fadeIn(400,
+				function(){
+					$('#modal_form')
+						.css('display', 'block')
+						.animate({opacity: 1, top: '50%'}, 200);
+				});
+		});
+		$('#modal_close, #overlay').click( function(){
+			$('#modal_form')
+				.animate({opacity: 0, top: '45%'}, 200,  // плавно меняем прозрачность на 0 и одновременно двигаем окно вверх
+				function(){
+					$(this).css('display', 'none');
+					$('#overlay').fadeOut(400);
+				}
+			);
+		});
+	});
+</script>
 <div class="bill-wrap">
 	<div class="comands-all-wrap">
 		<div class="bill-wrap-img">
@@ -434,3 +455,21 @@ $(function () {
 		</div>
 	</div>
 </div>
+
+<div id="modal_form">
+	<span id="modal_close">X</span>
+	<form action="" method="post">
+		<h3>Простое модальное окно</h3>
+		<p>Тут может быть рандомная обычная форма например.</p>
+		<p>Ваше имя<br>
+			<input type="text" name="your-name" value="" size="40">
+		</p>
+		<p>Ваш телефон<br>
+			<input type="text" name="your-name" value="" size="40">
+		</p>
+		<p style="text-align: center; padding-bottom: 10px;">
+			<input type="submit" value="Отправить">
+		</p>
+	</form>
+</div>
+<div id="overlay"></div>
 \ No newline at end of file
@@ -520,4 +520,31 @@ a.special-talents-text-2-img:hover {
 }
 .scroll-img ul li {
     display: inline-block;
+}
+#overlay {
+    z-index: 3;
+    position: fixed;
+    background-color: #000;
+    opacity: 0.8;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+    display: none;
+}
+#modal_form {
+    width: 300px;
+    height: 300px;
+    border-radius: 5px;
+    border: 3px #000 solid;
+    background: #fff;
+    position: fixed;
+    top: 45%;
+    left: 50%;
+    margin-top: -150px;
+    margin-left: -150px;
+    display: none;
+    opacity: 0;
+    z-index: 5;
 }
 \ No newline at end of file