JQuery Pop-Up Box - Snippet

JQuery Pop-Up Box - Snippet

What you'll be creating: [Only registered and activated users can see links. Click Here To Register...]
An exact replica of the preview page: [Only registered and activated users can see links. Click Here To Register...]
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.

Good job! nice release

Nice one, thanks for this mate.

Quote:

---

Originally Posted by DynamicGFX [Only registered and activated users can see links. Click Here To Register...]

JQuery Pop-Up Box - Snippet

What you'll be creating: [Only registered and activated users can see links. Click Here To Register...]
An exact replica of the preview page: [Only registered and activated users can see links. Click Here To Register...]
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!