HTML popups in KickStart

I read the HTML post about KickStart and immediately decided to try out the above set of scripts and styles. After consideration, I decided to put it into practice on a specific project. But I was unpleasantly surprised by the lack of pop-ups, I don’t like to cross pages frequently. Such tasks as, for example, the form of adding a new user, it seemed to me, should not transfer the user to a new page, but display what is needed in a pop-up window. So I put a script for this. Details under the cut.

Actual at the time of this writing, the version of HTML KickStart 0.9 MIT.

The first thing I did was create a separate file for my javascript. I called it “user.js” and put it in the js folder and immediately connected it on the page.

<script type="text/javascript" src="js/user.js"></script> 

It was decided to simplify the addition of blocks to the page as much as possible so that you can insert these blocks into the code on the fly, but first you need to create a background that obscures the page. Right above the closing body tag, I inserted a div with id bg:

 <div id="bg"></div> 

In style.css, which lies at the root, I have prescribed the following styles for it:

 #bg { width:100%; height:100%; position:fixed; top:0;left:0; background:black; display:none; z-index:601; /*  ,     KickStart  z-index 600 */ opacity:0.3; } 

To the block that will open, I decided to assign the class “hiddenBlock” and assign a unique id:

 <div class="hiddenBlock" id="createUser">  </div> <div id="bg"></div> 

In css described the class "hiddenBlock":

 .hiddenBlock { position:absolute; top:20%; left:50%; z-index:602; width:400px; background:#efefef; border: 1px solid #ccc; padding:10px 20px; border-radius:10px; margin-left:-210px; display:none; } 

To the button that should open the window I added the “box” attribute with the id of the window it should open and added the “show” class to it:

 <button class="medium blue show" box="createUser"></button> 

To close the window, I created in it a button with the class “close”:

 <button class="medium blue close"></button> 

Well, the code itself, finally:

 $(document).ready(function(){ $(".show").click(function(){ $("#bg").show(); $("#"+($(this).attr("box"))).slideDown("fast"); }); $(".close").click(function(){ $("#bg").hide(); $(".hiddenBlock").slideUp("fast"); return false; //   ,     }) }); 

The result was:

 <button class="medium blue show" box="createUser"></button> <div class="hiddenBlock" id="createUser"> <form action="index.php" method="post">    (    ) <button class="medium green"></button> <button class="medium blue close"></button> </form> </div> <div id="bg"></div> 

Demonstration of work
I hope someone this information will be useful.