jfPopUp

jQuery plugin designed to load html popup messages.

Script Set Up

Just follow these steps to enable:

1. Include jQuery on your page.

   <script src="http://code.jquery.com/jquery.min.js"></script>

2. Download and include jfPopUp after jQuery and before its first use.

   <script src="jquery.jfPopUp.js"></script>

3. Download and include jfPopUp.css in the head of the html.

   <link href="css/jfPopUp.css" rel="stylesheet" type="text/css" />

4. Init the plugin by attaching it the elements you want responsible for launching external files.

   $(window).jfPopUp({auto:true, message:'type your message here'});

Demo

https://codepen.io/fonstok/pen/yPQLQx

Options and Defaults

Options and Defaults

Basics

• loadElement: 'body' The element you want the light box to be loaded into.
• message: 'type your message here' The message you want the popup to display.
• auto: false Launch message on page load.
• mouseEvent: 'none' You can pass it a mouse event on the object to trigger launch.

Window Animation

The window fades in by default, but you can pass it From and To properties via lists and CSS properties to change its animation. The out will be the reverse of what ever you set.

• animationFrom: {opacity:'0', 'margin-top':'100px'} The load window's animation starting properties.
• animationTo: {opacity:'1', 'margin-top':'0px'} The load window's animation ending properties.
• pause: 0 Pause time before the window comes in.
• speed: 100 Speed of window animation.
• ease: 'swing' You can pass the animation an ease, but you must to link to a library or plugin such as, jqueryUI, that includes ease options.

Passing Functions

• onStart: You can pass a function to be called when the load has started.
• onStartArgs: If the onStart function has arguments, you can pass argument values via an array ['arg1', 'arg2'].
• onComplete: You can pass a function to be called when the load is completed.
• onCompleteArgs: If the onComplete function has arguments, you can pass argument values via an array ['arg1', 'arg2'].
• onClosed: You can pass a function to be called when the window is closed.
• onClosedArgs: If the onClose function has arguments, you can pass argument values via an array ['arg1', 'arg2'].

Options as Arguments

Options can be passed as arguments through the init function.

$('window').jfPopUp({
	message:'hello',
	auto:true,
	animationFrom:{opacity:'0', 'margin-top':'100px'},
	animationTo:{opacity:'1', 'margin-top':'0px'},
	pause:0,
	speed:100,
	ease:'swing',
	onStart:function(){console.log("started")},
	onComplete:function(){console.log("complete")},
	onClosed:function(){console.log("closed")},
  });

Options as Data Attributes

Options can also be passed through data attributes in the opening of the attached element. Note that the data attributes use dashes instead of camel case.

<div class="popupme" 
	data-message="Hello" 
>Mouse Over Me</div>

Public functions

There are a few public functions that can be called at any time after init.

• launch(): This function can be called to launch the external file associated with the element it's attached to. It's handy for launching on a unique event like drag stop or drop. Additionally, you will most likely need to disable the click functionality by setting the mouseEvent to "none".
• close(): This closes the window.
• destroy(): This deactivates the plugin.
• init(): This initates the plugin, this gets called automatically.

$(window).data("jfPopUp").launch();
$(window).data("jfPopUp").close();
$(window).data("jfPopUp").destroy();
$(window).data("jfPopUp").init();

Structure

These are the elements the plugin creates.

<div class="mb_messagebox">
	<div class="mb_shade"></div>
	<div class="mb_window">
		<div class="mb_content"><!--stuff gets loaded here --></div>
		<div class="mb_closeBtn">close</div>
	</div>
</div>

Classes

• .mb_messagebox: The main parent element.
• .mb_shade: The backdrop area.
• .mb_window: The parent of the content area and close button. Gives you a layer to work with.
• .mb_content: Where the message be loaded.
• .mb_closeBtn: The close button.

Credits

I used http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ as a starting point for the plugin.