Thread: JQuery Pop-Up Box - Snippet

Nice one, thanks for this mate.

Originally Posted by DynamicGFX

JQuery Pop-Up Box - Snippet

What you'll be creating: [Only registered and activated users can see links. ]
An exact replica of the preview page: [Only registered and activated users can see links. ]
Or stripped down version without the random stuff.

Spoiler for Snippets:

HTML:
[SPOIL]

Code:

<div class="button" data-name="name">Show Box</div>
<div id="bg" class="name">
  <div class="button_close" data-name="name">Close</div>
  <div id="popup" class="name">
    A popup box designed to be re-used as many times as you like. Defined through the <i>data-name</i> attribute within the buttons.
  </div>
</div>

[/SPOIL]
CSS:
[SPOIL]

Code:

#popup {
  background:#111;
  color:#eee;
  border: 1px solid rgba(0,0,0,0.2);
  padding: 24px 12px;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 
    0px 0px 0px 1px rgba(255,255,255,0.2),
    0px 4px 0px 2px rgba(0,0,0,0.1);
  width:50%;
  margin:50px auto;
  font-family:tahoma;
  display:none;
  z-index:99999999;
}
#bg {
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  display:none;
  z-index:9999999;
}
.button, .button_close {
  padding:10px;
  background:rgba(0,1,17,0.5);
  color:#fff;
  cursor:pointer;
  text-transform:uppercase;
  font-family:tahoma;
  border: 1px solid rgba(0,0,0,0.2);
  width:200px;
  text-align:center;
  margin:0 auto;
  transition:0.5s;
}
.button {
    margin-top:200px;
}
.button:hover, .button_close:hover {
  background:rgba(0,1,17,0.7);
}
.button_close { margin-top:8px; }

[/SPOIL]
JQuery:
[SPOIL]

Code:

$(document).ready(function(){
    $('.button').click(function(){
			var name = $(this).data("name");
			console.log(name);
			$('.'+name).fadeIn();
			$('.'+name).fadeIn();
    });
    $('.button_close').click(function(){
			var name = $(this).data("name");
			console.log(name);
			$('.'+name).fadeOut();
			$('.'+name).fadeOut();
    });

});

[/SPOIL]

The JQuery uses the data-name attribute to select the popup box you're wanting to pull up, it was originally made for a friend to use in their store(using a while loop) so it'd be easier to implement.

pretty sure theres no need to fade in/out the inner elements, as fading out the enclosing elements will also hide the inner
also, different elements should have unique ids

Code:

<div class="button open" data-open="bg">Show Box</div>

<div id="bg" class="popup">
  	<div class="button close" data-close="bg">Close</div>
  	<div class="popup-box">
    		A popup box designed to be re-used as many times as you like. Defined through the <i>data-name</i> attribute within the buttons.
  	</div>
</div>

Code:

$(document).ready(function() {
	$('.open').click(function(){
		var name = $(this).data("open");
		$("#"+name).fadeIn();
 	});
 	$('.close').click(function(){
		var name = $(this).data("name");
		$("#"+name).fadeOut();
	});
});

Also, you can use two classes on one button, such as "button open" and "button close"

Code:

.button {
 ...
}
.button .close {
 ...
}
.button .open {
 ....
}

Nice, thanks!