Printable Version of Topic
Click here to view this topic in its original format
Code > Scripts > jQuery Modal Popups


Posted by: Black November 6th, 2013, 09:49 AM
Description: A very, very basic modal popup window plugin for jQuery. Adapted from http://code.jfbs.net/?showuser=1's http://code.jfbs.net/?showtopic=56 at the request of http://code.jfbs.net/?showuser=20 and publicly released with permission.
Requires: http://jquery.com/
Target Platform: All Forum Hosts
Demonstration: N/A
Installation Instructions:
Step 1: Add these rules to your CSS. Adjust as necessary.

CODE
.modal-content {
display: none;
}

#fade-background {
position: fixed;
_position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
z-index: 2;
}
#modal-window {
position: fixed;
top: 64px;
left: 50%;
width: 860px;
background-color: #F9F9F9;
margin: 0 0 0 -430px;
z-index: 3;
}


Step 2: Add the following to your board wrappers.

Code (Click to highlight)
<script>
// jQuery Modal Popups by Black
// http://code.jfbs.net/?showtopic=57
$(document).ready(function() {
var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
$(document.body).append(fadeBackground, modalWindow);
$(document).on("click", ".modal-link", function(e) {
$("#fade-background").css({ "opacity": "0.3" }).fadeIn("fast");
var newContents = $("#" + $(this).data("modal-target")).html();
$("#modal-window").html(newContents);
$("#modal-window").fadeIn("fast");
e.preventDefault();
});
$(document).on("click", "#fade-background", function() {
$("#fade-background").fadeOut("fast");
$("#modal-window").fadeOut("fast");
});
$(document).keypress(function(e) {
if(e.keyCode == 27) {
$("#fade-background").fadeOut("fast");
$("#modal-window").fadeOut("fast");
}
});
});
</script>


Step 3: Create a <div> with a unique id attribute and place whatever you want inside of it. Apply the class .modal-content to it. Place this element anywhere in your board wrappers; closer to the bottom is probably better.

CODE
<div id="example-popup" class="modal-content">This is an example popup.</div>


Step 4: Insert an anchor tag with the class name .modal-link and a data-modal-target attribute corresponding to the id of your example <div> anywhere in your board wrappers. The <div> that contains content must be unique, but you may have as many links for it as you like.

CODE
<a href="#" class="modal-link" data-modal-target="example-popup">Example</a>
<a href="#" class="modal-link" data-modal-target="example-popup">Try this one, too</a>


Step 5: Click your link. Adjust popup styles and contents at your leisure. You may set up an unlimited number of potential popups by creating more .modal-content elements.

Posted by: valkyriemc November 24th, 2013, 12:46 PM
you're the best, black <3

Posted by: JON SNOW. December 5th, 2013, 12:24 AM
hey jsyk in the css bit there's a space between the period and modal-content so it messes up when you install it.

Posted by: JON SNOW. December 5th, 2013, 04:21 PM
SORRY FOR THE DOUBLE POST but i'm having problems now. ;-;

I installed this http://stunner.jfbs.net and for some reason when you click on the control tab it messes up? Like when you click off to close it, it disappears for a second and then it comes back and the only way to get rid of it is to refresh the page.

Posted by: Black December 5th, 2013, 04:44 PM
Crazy stuff. I made a few minor changes to just the script portion- exchange what's in the first post here for what you have and see if the problem persists?

Posted by: JON SNOW. December 5th, 2013, 04:49 PM
Now it doesn't even disappear for a second. The fade background goes away, but the info pane stays. D:

Edited to say it's fixed. Even though you know. But so that other people don't get ~nervous about using it or anything.

Posted by: Owl March 23rd, 2014, 08:39 PM
Has anyone else had any problems with this regarding c-boxes? Mine is having issues refreshing content and once the message is submitted it does not remove the text in the input. Any help would be greatly appreciated.

Posted by: tana proma March 24th, 2014, 02:41 AM
I swear to god, I feel like crawling into a corner and crying because this code is so perfect. Thank you so much, Black. You are a god! When I finish my next skin, I'll be sure to link it!

Posted by: fleur ford-styles. April 29th, 2014, 04:05 PM
ugh this is fabulous <3 thank you!!!!!!!!!!!!

Posted by: HARRY STYLES June 9th, 2014, 07:04 AM
are you serious? this is the greatest thing ever. Black, you are a blessing!

Posted by: tuxedo mask January 9th, 2015, 11:18 AM
is there a way to add a button (ex: an 'X' in the top right corner) that will close the modal window when clicked on? i know you can just click anywhere outside of the window to close it, but i'm curious if there's a way to add a (functional) X button. c: thanks! <3

Posted by: MAYA PAPAYA. January 24th, 2015, 09:15 AM
QUOTE (tuxedo mask @ January 9th, 2015, 07:18 PM)
is there a way to add a button (ex: an 'X' in the top right corner) that will close the modal window when clicked on? i know you can just click anywhere outside of the window to close it, but i'm curious if there's a way to add a (functional) X button. c: thanks! <3


this would actually be an amazing feature <3 especially because when on your phone, for example, you can't just click next to the pop up to make it close again. it's like, physically impossible to close a pop up box after you've opened it on your phone, so you have to refresh the site, or go back, to get away from it again c:

Posted by: JON SNOW. April 15th, 2015, 10:02 PM
this is like a super late answer but if you look http://codepen.io/davidicus/pen/ZYjoVO there's a modal pop up with an X button. unfortunately, the X button eliminates the ability to close the box just by clicking outside of it, however.

on another note, i'm using this script http://rabbitwillrun.jcink.net and i know black doesn't really support this code anymore but i was hoping someone might be able to help me out with this problem, at least? for some reason, no matter what i do the #modal-window div is 100% the width of the screen. i've found a work-around for it that makes things appear the width that i want them, but this isn't a perfect solution because you have to click either above or below to close out of the pop-up. clicking to either side doesn't work. (i fixed this on my own, realized what i was doing wrong. oops!!!)

also, i'd like it if the modal pop-up were in a fixed position, rather than absolute? so that it shows up in the middle of my screen regardless of whether or not i'm actually scrolled to the top of the page at the moment.

hopefully somebody knows how i can fix these issues~

Posted by: Pierrot April 17th, 2015, 11:59 PM
fixed lol

Posted by: MAPS May 16th, 2015, 11:47 PM
this is just a note since i saw people asking about a functional 'x' button. this makes it so you can use an 'x' button & also click outside of the box to close it.

CODE
<script>
// jQuery Modal Popups by Black
// http://code.jfbs.net/?showtopic=57
$(document).ready(function() {
var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
$(document.body).append(fadeBackground, modalWindow);
$(document).on("click", ".modal-link", function(e) {
 $("#fade-background").css({ "opacity": "0.3" }).fadeIn("fast");
               var newContents = $("#" + $(this).data("modal-target")).html();
               $("#modal-window").html(newContents);
 $("#modal-window").fadeIn("fast");
 e.preventDefault();
});
$(document).on("click", ".oppayipyip", function() {
 $("#fade-background").fadeOut("fast");
 $("#modal-window").fadeOut("fast");
});
$(document).on("click", "#fade-background", function() {
 $("#fade-background").fadeOut("fast");
 $("#modal-window").fadeOut("fast");
});
$(document).keypress(function(e) {
 if(e.keyCode == 27) {
  $("#fade-background").fadeOut("fast");
  $("#modal-window").fadeOut("fast");
 }
});
});
</script>


this one is so you can only use the 'x'

CODE
<script>
// jQuery Modal Popups by Black
// http://code.jfbs.net/?showtopic=57
$(document).ready(function() {
var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
$(document.body).append(fadeBackground, modalWindow);
$(document).on("click", ".modal-link", function(e) {
 $("#fade-background").css({ "opacity": "0.3" }).fadeIn("fast");
               var newContents = $("#" + $(this).data("modal-target")).html();
               $("#modal-window").html(newContents);
 $("#modal-window").fadeIn("fast");
 e.preventDefault();
});
$(document).on("click", ".oppayipyip", function() {
 $("#fade-background").fadeOut("fast");
 $("#modal-window").fadeOut("fast");
});
$(document).keypress(function(e) {
 if(e.keyCode == 27) {
  $("#fade-background").fadeOut("fast");
  $("#modal-window").fadeOut("fast");
 }
});
});
</script>


css is
CODE
.modal-content {
display: none;
}

#fade-background {
position: fixed;
_position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
z-index: 2;
}
#modal-window {
position: fixed;
top: 64px;
left: 50%;
width: 860px;
background-color: #1e1e1e;
margin: 0 0 0 -430px;
z-index: 3;
}

.oppayipyip {
position:absolute;
right:0;
THIS IS YOUR 'X' BUTTON. edit it as you will.
}



this is the modal popup with the x button inside

CODE

<div id="example-popup" class="modal-content"><div class="oppayipyip" cursor="pointer">X</div>This is an example popup.</div>


random side-note: to get rid of the scroll-to-top when clicking on the modal pop-up link, make the link a non-link & switch the cursor to pointer

all credit to black for the beautiful coding ofc

Posted by: Pierrot May 17th, 2015, 11:52 AM
Thanks so much for your contribution biggrin.gif

'
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)