Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Saturday, June 16, 2012

Unblockable CSS POPUP With Lightbox Effect Without JQuery

This Article Was Live On: Saturday, June 16, 2012 And Till Now Have32 comments.
Unblockable CSS POPUP With Lightbox Effect Without JQuery

AlHamdulillah...!!! We Design World First Unblockable On Page-Load Full And Only CSS Based POP-UP With Light Box Effect Without JQuery Work On IE+7 And All Major Browsers.

Historical Story Behind This:
Today I am very glad to share this “World First Unblockable On Page-Load CSS POP-UP With Light Box Effect Without JQuery” code with you and that is my life’s biggest achievement that I am going to share with you. As no one can think about it how CSS can do it? But one thing that CSS itself did not know that what can It do…!!! This all become only three words those are “I HATE JQUERY” I really hate JQuery because all know what the hell is JQuery, It Will Increase Your Page Size as a result of your site or blog page time become very high that are bad for both, SEO and Visitor. SEO check the blog or site loading time as you also know and due to this you can get higher ranking and on other way you visitor also get upset because 75% of worlds are using slow internet connection due to poverty or not provided better services. So that’s all the problem from which I also get upset but one night CSS open my eyes to the end of ideas from where I get this pop up code.

As one more thing that this pop up also contain light box effect also through CSS, few minutes ago when I think about light box effect there appears lot of JQueries in my minds that make me anger. So this problem is also solved from CSS as you can see the code. The reason behind this idea was also JQuery that in my blog there is also a JQuery which is important (I am looking for CSS as a alternative for it…) so when I use pop up with light box effect that contain a JQuery that cancelled out my first JQuery as a result of that no code was working and also my blog got fully messed up that are really irritating me and my visitor. But pop ups are really cool when it graphical fully so I could not sat easily because I have to do both with easy way on which no one have made their path earlier.

Unblockable CSS POPUP With Lightbox Effect Without JQuery

Therefore I made up my mind to prepare the popup that will not cancel out anything, as I have face this earlier at multi tab widget container that I have also a JQuery Multi-Tab Widget but they also cancel out my other JQuery so I also create a CSS Multi Tab Widget With only two line code. Because as I earlier say that CSS itself did not know that what can it do…!!! So I solved that issue now I am here to solve popup with light box issue. 
Click To Enlarge

Here I have to show you world first CSS Unblockable POPUP with Light Box Effect that is coded by me and my brother (Muhammad Hassan & Muhammad Saalim). We just design this code in less than an hour. There is only four line CSS code with some HTML Code. One more thing have to mention here that it is not CSS3 it just a simple CSS so it can work easily with all browsers Like IE+7. If any code is working properly at IE+7 it means that it will also work on Chrome, FireFox, Opera and Safari etc. So you have not to worry about limitation. It as simple as you cannot imagine so when you have a look below at the code you can easily understand that what I am trying to say. When you have look on it you will experience that even code button is also working on HTML-CSS.

Unblockable CSS POPUP With Lightbox Effect Without JQuery

It’s time to over this introductive story and proceeds to that main code that is unique in the world and nobody can imagine or even think about it. First of all have a look on the demo screenshot and demo to ensure the qualities of this popup to your mind that there is no difference with Jquery popup. Here it is also easy to implant and you can easily say that one click implantation. It Is 100 time quick to load with respect to JQuery popup and it never mess up your template. One more thing that this pop up contains only one image has size 999bytes only for light box effect.

1.) Unblockable By All Browsers (IE+7, Chrome, Safari, FireFox, Opera etc).
2.) Works With All Browsers (IE+7, Chrome, Safari, FireFox, Opera etc).
3.) Not A Single JQuery File.
4.) Close Button Have Also HTML-CSS Fuction.
5.) Easy To Install And Quick Quick Quick To Load.
6.) Light Box Effect.
7.) World First CSS Based POPUP.
8.) Open On Page Load.
9.) Simple And Full Customizable.
10.) Same Look As JQuery Have.
11.) It Will Not Mess Up Your Template.

How To Add In Blogspot?
1.) Go To Your
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

Here Is The Code:
<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<style type="text/css">
* CSS POP-UP With Light Box Effect- © EXEIdeas (
* This notice must stay intact for use.
* Visit for full source code.
@media only screen and (min-width: 600px) {#exestylepopupdiv{display:block;}}
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('');margin:0; overflow-y:auto;}
#exestylepopup {background-color: #fff; overflow:none;}
.exestylepopup {width:400px; height:300px; position:fixed; top:50%; left:50%; margin-top:-150px; margin-left:-200px;}
<!--[if lte IE 6]>
<style type="text/css">
html {overflow-x:auto; overflow-y:hidden;}
<style type="text/css">
</noscript><div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center style="color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">
<img src=""/>
+++ Your Text, Pic Vdo, HTML Code, CSS Code, iFrame, Widget Or Anything You Want To Show In The POP UP. +++
<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

How To Customize:
1.) First You Don’t Have To Touch OnMouseUp Code Because Tis Is Only For Working Of Close Button.
2.) Here The First CSS line Is Default For Everyone.
3.) Then You Also Did Not Have To Touch Second Line Of CSS Because It’s Made To Default To All User Used Only For Light Box Effect.
4.) In Third CSS Line Also Change Background Colour and leave all code as it is because It Is Made To Default.
5.) Here Comes Fourth CSS Line from There You Have To Style Up Your POPUP. Change Width And Height As You Want Then Change The Value Of margin-top Half Of Height As You Can See In The Above Code, Similarly Change The Value Of margin-left To The Half Of Width Value Exactly Even It Comes Into Points Value And Don’t Forget To Add Minus Sign To Them. This Is Only For Alignment Of Your POPUP Into centre For All Size Of Screen All Over The World.
6.) After This Come To HTML Code Where First DIV Is Only For Light Box Effect So Don’t Try To Touch It.
7.) In Second DIV You Will See A Code In <center></center> Tag That Is Close Button. You Can Also Position It Through There CSS In Every Corner Of The POPUP DIV Or Even Can Change It With TEXT.
After This Add Your Text, Pic Vdo, HTML Code, CSS Code, iFrame, Widget Or Anything You Want To Show In The POP UP.
8.) Click Save And Done, Now Enjoy.

Bonus: Get The POP UP Domination For Blogger And Website Here That Is Generated By This Code.
Note: This Code Is Highly Copyrighted Via DMCA And Other Services, You Are Free To Use (Personal And Commercial), Edit And Share But With The HTML Design Code That Will Not Appear In Your POPUP. If Anybody Is Found To Be Thefting Or Without HTML Design Code Is Under Legal Action And If He Is Sharing Via There Site Or Blo Will Be Got Banned By DMCA With Porior Notice Because I Am Telling Yo In Advance.

You Like It, Please Share This Article Using...

Don't Forget To Read This Also...


  1. amazing man.. it is the best alternative of pop up domaination so far i have ever seen

  2. Hassan are you programmer? i am very glad that you design this for yourself. keep it up.

    1. Just A Code Player, Anyway Thanks Bro...

  3. how to make the pop up appear only in the home page

    1. This Is A Simple POPUP And POPUP Mean That Will Appear On Every Re-Load Of The Page, For One Time Customized POPUP, See Our J-Query Style POPUPs.

  4. realy good tips, I also would lke to share more on my blog

    1. Feel Free To Share But With A Back-Link...

  5. Hi bro! Im really like this popup, i have it on my pblog and I have sucefully embed my vidostream on it, but is it possible to make this popup work on demand when click on a link? If it is plss tell my how to do it :(

    1. Thanks And Wait For The Next HOT Post In Which I Will Full-fill Your Desire...:-)

  6. can u give me the code you put in this popup , the red one with the subscribiton box

    1. These Are Our Hottest EXE-Style POP-Ups 99.99% Similar To POP-UP Domination.
      Get A List Of Awesome Design POP-UPs...
      POP UP Domination For Blogger And Website

  7. I want to one time unblockable popup .


    1. Use JQuery POPUP To Show It On Your Desire...

  8. I just want to tell you that I am just beginner to blogs and honestly loved your website. Likely I’m likely to bookmark your blog . You actually come with fantastic posts

  9. I was just searching for this information for a while. After 6 hours of continuous Googleing, at last I got it in your web site. I wonder what is the lack of Google strategy that do not rank this kind of informative websites in top of the list. Generally the top web sites are full of garbage.

    1. Thanks For Finding Us, Be With Us To Get More Awesome Codes...

  10. Hello, i was trying to set a cookie to show the pop up only once in a week for the visitor. how to achieve this? I dont know anything about javascript for that matter :( pls help me out if u can.

    Many thanks

    1. For This Purpose, You Have To Use Over JQuery Version POPUP...

  11. hi i want to ask something .. does it use cookies?? so if a person like me it will not show up again???

    or there is a way to use cookies for my like box?

    1. Well It's Pure CSS So It Didnot Use Cookies That Must Have To Use JQuery, So It Can't But You Can Visit Our Other POPUP That Contain Cookies Option Too...

  12. Hi Hassan
    Shall i use your popup code like with this customization(pls refer demo url) is not yet launch.
    awaiting ur replay
    with kind regards
    website developer

    1. Thanks For Using It And Yes, You Can Use It But With HTML Design Code...

  13. Hello and Thankyou for the popup. Very clever.

    I made a couple of additions, I hope you don't mind.
    The main one was, because the popup requires javascript to be enabled to close the popup, so I stopped the popup being shown to non javascript enabled browsers with a noscript. I cannot add the tag in the comment so will just write the noscript

    style type="text/css"

    I also stopped the popup on mobiles using an @media css style, so that the popup only showed on screens larger than 600px.
    @media only screen and (min-width: 600px) {

    Hope you don't mind my addition.
    Your popub is excellent. Thanks again.


    1. Welcome Here And Thanks For Giving Some Time To Us In This POPUP. We Will Surely Update Our All POPUP Codes. Again Thanks For Your Editing...


Speak Your Mind:

Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.