Add ReplyNew Thread

 jQuery Modal Popups, All Forum Hosts
Black
 Posted: November 6th, 2013, 09:49 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Description: A very, very basic modal popup window plugin for jQuery. Adapted from Black's Personal Message Popup at the request of JON SNOW. and publicly released with permission.
Requires: jQuery
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.
PANSY PARKINSON
 Posted: November 24th, 2013, 12:46 PM
Quote
Advanced Member
Posts:40Group:MemberJoined:October 28th, 2013
Send Message


you're the best, black <3
EmailWebsite
MAX ROCKATANSKY
 Posted: December 5th, 2013, 12:24 AM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


hey jsyk in the css bit there's a space between the period and modal-content so it messes up when you install it.
MAX ROCKATANSKY
 Posted: December 5th, 2013, 04:21 PM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


SORRY FOR THE DOUBLE POST but i'm having problems now. ;-;

I installed this here 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.
Black
 Posted: December 5th, 2013, 04:44 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


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?
MAX ROCKATANSKY
 Posted: December 5th, 2013, 04:49 PM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


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.

This post has been edited by JON SNOW.: December 5th, 2013, 05:04 PM
Owl
 Posted: March 23rd, 2014, 08:39 PM
Quote
Advanced Member
Posts:38Group:MemberJoined:March 5th, 2014
Send Message


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.
tana proma
 Posted: March 24th, 2014, 02:41 AM
Quote
Member
Posts:16Group:MemberJoined:March 21st, 2014
Send Message


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!
Email
fleur ford-styles.
 Posted: April 29th, 2014, 04:05 PM
Quote
Newbie
Posts:1Group:New MemberJoined:April 29th, 2014
Send Message


ugh this is fabulous <3 thank you!!!!!!!!!!!!
HARRY STYLES
 Posted: June 9th, 2014, 07:04 AM
Quote
Newbie
Posts:3Group:New MemberJoined:April 7th, 2014
Send Message


are you serious? this is the greatest thing ever. Black, you are a blessing!
tuxedo mask
 Posted: January 9th, 2015, 11:18 AM
Quote
Newbie
Posts:4Group:New MemberJoined:January 9th, 2015
Send Message


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 post has been edited by tuxedo mask: January 9th, 2015, 06:20 PM
MAYA PAPAYA.
 Posted: January 24th, 2015, 09:15 AM
Quote
Newbie
Posts:1Group:New MemberJoined:October 19th, 2013
Send Message


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:

This post has been edited by MAYA PAPAYA.: January 26th, 2015, 05:40 AM
EmailWebsite
MAX ROCKATANSKY
 Posted: April 15th, 2015, 10:02 PM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


this is like a super late answer but if you look here 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 here 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~

This post has been edited by JON SNOW.: April 15th, 2015, 10:17 PM
Pierrot
 Posted: April 17th, 2015, 11:59 PM
Quote
you are not your skin.
Posts:500Group:StaffJoined:August 28th, 2013
Send Message


fixed lol
Email
MAPS
 Posted: May 16th, 2015, 11:47 PM
Quote
Newbie
Posts:1Group:New MemberJoined:May 16th, 2015
Send Message


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

This post has been edited by MAPS: May 16th, 2015, 11:48 PM
Pierrot
 Posted: May 17th, 2015, 11:52 AM
Quote
you are not your skin.
Posts:500Group:StaffJoined:August 28th, 2013
Send Message


Thanks so much for your contribution biggrin.gif
Email

Topic Options Add ReplyNew Thread


 


 

Latest Shouts In The Shoutbox -- View The Shoutbox · Rules   


's reputation