|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.
Target Platform: All Forum Hosts
Step 1: Add these rules to your CSS. Adjust as necessary.
Step 2: Add the following to your board wrappers.
Code (Click to highlight)
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.
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.
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|
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?
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|
|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.
this one is so you can only use the 'x'
this is the modal popup with the x button inside
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|