Всплывающий попап

[Grimnir69]

Добрый вечер!

Подскажите пожалуйста, как мне сделать всплывающий попап, активируемый щелчком по ссылке

<a class="clickMe" href="#"><img src="gf-1.png"></a><div style="opacity: 1; visibility: visible;" class="popup"><div class="close_order">X</div>

[abrahadabra]

довольно просто.

Во-первых, он изначально должен быть скрытым, а по клику просто меняете свойства opacity и visible.

[Grimnir69]

довольно просто.

Во-первых, он изначально должен быть скрытым, а по клику просто меняете свойства opacity и visible.

А сможете написать код, как это должно выглядеть?

[abrahadabra]

ну во-первых, я бы стили определила в стили. То есть:

.popup {  opacity: 0;  visibility: hidden;  transition: all .3s ease;  &.active {    opacity: 1;    visibility: visible;  }}

А по клику только добавлять класс:

$(".clickMe").on("click", function(){  $(".popup").addClass("active");});$(".close_order").on("click", function(){  $(".popup").removeClass("active");});

[Grimnir69]

 

ну во-первых, я бы стили определила в стили. То есть:

.popup {  opacity: 0;  visibility: hidden;  transition: all .3s ease;  &.active {    opacity: 1;    visibility: visible;  }}

А по клику только добавлять класс:

$(".clickMe").on("click", function(){  $(".popup").addClass("active");});$(".close_order").on("click", function(){  $(".popup").removeClass("active");});

У меня имеется такая структура

<style>.overlay {    background-color: rgba(0, 0, 0, 0.7);    bottom: 0;    cursor: default;    left: 0;    opacity: 0;    position: fixed;    right: 0;    top: 0;    visibility: hidden;    z-index: 99999;		-webkit-transition: opacity .5s;		-moz-transition: opacity .5s;		-ms-transition: opacity .5s;		-o-transition: opacity .5s;		transition: opacity .5s;}.popup {	background-color: #fff;	border: 3px solid #fff;	display: inline-block;	left: 50%;	opacity: 0;	padding: 15px;	width: 250px;	height: 200px;	position: fixed;	text-align: justify;	top: 40%;	visibility: hidden;	z-index: 999999;	-webkit-transform: translate(-50%, -50%);	-moz-transform: translate(-50%, -50%);	-ms-transform: translate(-50%, -50%);	-o-transform: translate(-50%, -50%);	transform: translate(-50%, -50%);	-webkit-transition: opacity .5s, top .5s;	-moz-transition: opacity .5s, top .5s;	-ms-transition: opacity .5s, top .5s;	-o-transition: opacity .5s, top .5s;	transition: opacity .5s, top .5s;	border-radius: 11px;}.close_order {	font-size: 13px;	display: block;	width: 6px;	height: 17px;	position: absolute;	padding: 1px 9px 4px 9px;	top: -15px;	right: -15px;	cursor: pointer;	color: #fff;	font-family: 'tahoma', sans-serif;	background: -webkit-gradient(linear, left top, right top, from(#b1c200), to(#808800));	background: -webkit-linear-gradient(top, #b1c200, #808800);	background: -moz-linear-gradient(top, #b1c200, #808800);	background: -o-linear-gradient(top, #b1c200, #808800);	background: -ms-linear-gradient(top, #b1c200, #808800);	background: linear-gradient(top, #b1c200, #808800);	background-color: #b1c200;	border: 1px solid #00880d;	-webkit-border-radius: 50%;	-moz-border-radius: 50%;	-o-border-radius: 50%;	-ms-border-radius: 50%;	border-radius: 50%;	text-align: center;	box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);}.popup .close_order:hover {	background: -webkit-gradient(linear, left top, right top, from(#808800), to(#808800));	background: -webkit-linear-gradient(top, #808800, #b1c200);	background: -moz-linear-gradient(top, #ff5f0, #b1c200);	background: -o-linear-gradient(top, #808800, #b1c200);	background: -ms-linear-gradient(top, #808800, #b1c200);	background: linear-gradient(top, #808800, #b1c200);	background-color: #808800;	border: 1px solid #00385E;}.popup .close_order:active {	background: #ef3d01;}</style><script type="text/javascript" src="jquery.js"></script>	<script type="text/javascript">	$(document).ready(function(){		$('.popup .close_order').click(function (){			$('.popup').css({'opacity':'0', 'visibility':'hidden'});		});		$('a.clickMe').click(function (e){			$('.popup').css({'opacity':'1', 'visibility':'visible'});			e.preventDefault();		});	});	</script><script src="widget-vertical-editable" id="scFaGW2TtHr" async="" charset="UTF-8" type="text/javascript"></script></head><body><p><img src="price_bg.png"><a class="clickMe" href="#"><img src="gf-1.png"></a></p><div style="opacity: 1; visibility: visible;" class="popup"><div class="close_order">X</div><div id='gcw_mainFz715FeDn' class='gcw_mainFz715FeDn'></div><script>function reloadFz715FeDn(){ var sc = document.getElementById('scFz715FeDn');if (sc) sc.parentNode.removeChild(sc);sc = document.createElement('script');sc.type = 'text/javascript';sc.charset = 'UTF-8';sc.async = true;sc.id='scFz715FeDn';sc.src = 'http://freecurrencyrates.com/ru/widget-vertical-editable?iso=XUMXUL&df=2&p=Fz715FeDn&v=fits&source=fcr&width=270&width_title=0&firstrowvalue=1&thm=72B42D,a6bf03,8ba401,808800,ffffff,e0cfc2,eeeeee,448202,000000&title=%D0%9A%D0%BE%D0%BD%D0%B2%D0%B5%D1%80%D1%82%D0%B5%D1%80%20%D0%B2%D0%B0%D0%BB%D1%8E%D1%82&tzo=-120';var div = document.getElementById('gcw_mainFz715FeDn');div.parentNode.insertBefore(sc, div);} reloadFz715FeDn(); </script></body></html>

Что мне в ней следует подправить, чтобы попап работал корректно? :0)

[abrahadabra]

следует разместить на jsfiddle

А то тут уже не очень удобно разбираться.

[Grimnir69]

следует разместить на jsfiddle

А то тут уже не очень удобно разбираться.

https://jsfiddle.net/Grimnir69/6puoz1eo/

https://drive.google.com/file/d/0B0PJputsz7YPTEVyeDBub1JNZVU/view?usp=sharing

Edited January 31, 2016 by Grimnir69

[Grimnir69]

следует разместить на jsfiddle

А то тут уже не очень удобно разбираться.

Добрый день! Сможете посмотреть код? Ссылочки я скинул чуть выше :0)

[Николя223]

Скопируйте себе куда нибудь в редактор, там понятнее и попытайтесь разобраться)) тут на самом деле просто
https://jsfiddle.net/devbmfv3/

Я вам место оставил)) попытайтесь сами написать, метод toDown )) Например это будет выплывание из верха экрана))

[DivMan]

Скопируйте себе куда нибудь в редактор, там понятнее и попытайтесь разобраться)) тут на самом деле просто

https://jsfiddle.net/devbmfv3/

Я вам место оставил)) попытайтесь сами написать, метод toDown )) Например это будет выплывание из верха экрана))

А зачем так усложнять, если можно написать всего несколько строк?

[Николя223]

В чем там сложность? )) там все практически элементарно) просто кода чуть много)
я там кстати ошибку допустил) но на данном этапе не страшна))

[Grimnir69]

Скопируйте себе куда нибудь в редактор, там понятнее и попытайтесь разобраться)) тут на самом деле просто

https://jsfiddle.net/devbmfv3/

Я вам место оставил)) попытайтесь сами написать, метод toDown )) Например это будет выплывание из верха экрана))

А куда именно нужно написать метод toDown?