Quantcast
Channel: Patrick Skotniczny » Notes
Viewing all articles
Browse latest Browse all 5

jQuery Popup | Keeping it Simple

0
0

Sometimes when faced with a problem we unintentionally take the difficult road to solve it.

An eCommerce project I was working on requires a pop out box or lightbox effect to display when the user clicks a button to request more information on a product. jQuery is not one of my strong point so the first thing I did was look online for a jQuery lightbox plugin. After hours of trying a few different ones out and not being able to get the desired results I took a step back to realize, I was overcomplicating things.

All I needed was to Click a button -> Make a Div appear -> Click away, Close Div. Simple…

I’m going to display the code I used and briefly explain how it works.

What Are We Doing?

Adding a “View More” button to each product in a dynamically generated PHP based eCommerce store. Clicking the “View More” button will display a hidden div that contains more information about the product. Clicking outside of the div will close the just opened div.
Live Demo

What’s The Problem?

This is a dynamically generated list. That means that each button and hidden div will need to have a unique ID or Class. Also, our jQuery code will need to be able to associate the correct button with the correct div. We will achieve this buy using the data() method.

The PHP


<?
foreach($products as $product){

 // Hidden Longer Description

 // The hidden Div container is given a unique ID by using the products ID
 echo "<div class='popout' id='popout_" . $product->id . "'><div class='popout_content'>";
 echo $product->long_description;
 echo "</div></div>";

 // Short Description
 echo "<div class='short-description'>";
 echo "<h2>" . $product->title . "</h2>";
 echo $product->short_description;

 // We add the Data field to pass on the unique product id to the JQuery
 echo "<button class='topopout' data-product_id='" . $product->id . "'>More Info</button>";
 echo "</div>";

}
?>

We are using an example of a foreach loop. With each occurance of the loop we need to make sure that the popout div and the button have a unique identifier. We make the popout div unique by adding the product id to its class. We also add the product id to the button, but instead of using a class, we use “data” to store information that will be used by the jQuery.

The jQuery


jQuery(function($) {

$(".topopout").click(function() {
 var product_id = $(this).data('product_id');
 loadPopout(product_id);
 });

 $("div#background-popout").click(function() {
 disablePopout(); // function close pop up
 });

var popoutStatus = 0; // set value

function loadPopout(product_id) {
 if(popoutStatus == 0) { // if value is 0, show popup
 $("#popout_"+product_id).fadeIn(0500); // fadein popup div
 $("#background-popout").css("opacity", "0.7"); // css opacity, supports IE7, IE8
 $("#background-popout").fadeIn(0001);
 popupStatus = 1; // and set value to 1
 }
 }

function disablePopout() {
 if(popupStatus == 1) { // if value is 1, close popup
 $(".popout").fadeOut("normal");
 $("#background-popout").fadeOut("normal");
 popoutStatus = 0; // and set value to 0
 }
 }

});
<pre>

First we declare our actions. Clicking .topopout (button) will execute the loadPopout function, but first it creates a variable from the product id we attached to the button in the PHP code.

The second action. Clicking #background-popout will set off the disablePopout function.

The CSS


#background-popout {
 z-index:1;
 position: fixed;
 display:none;
 height:100%;
 width:100%;
 background:#000000;
 top:0px;
 left:0px;
}
.popout {
 background: none repeat scroll 0 0 #FFFFFF;
 padding: 15px 35px;
 color: #333333;
 display: none;
 font-size: 14px;
 left: 50%;
 margin-left: -402px;
 position: fixed;
 top: 20%;
 width: 800px;
 z-index: 2;
}

div.popup_content {
 margin: 4px 7px;
}

.short-description{
 width: 500px;
}

The CSS is kept very minimal in this example. Actually all the code is kept as simple as possible.

Why so simple?

Instead of running out and finding a bloated LightBox plugin for your project. Do a bit of research, like myself you might find that the solution is actually a lot easier then you think and you might learn something along the way.

I find that this very simple example can be updated and styled to fit a wide verity of need.

Live Demo

The post jQuery Popup | Keeping it Simple appeared first on Patrick Skotniczny.


Viewing all articles
Browse latest Browse all 5

Latest Images

Trending Articles





Latest Images