Adding a pop-up windows is very easy with the introduction of CSS3. It can be used to display source code, pictures and whatever we want. This post describes how to add a simple pop-up window to blogger using CSS3 and a couple lines of jQuery….

How to add a pop-up window using CSS3 and jQuery in blogger to display source code pictures

View the Demo
First we need to edit the Template. Go to edit HTML from Template.

This is the jQuery codes.

Check your template for red colored code. If it is already there, then skip that line. Copy other lines and paste just below this code ]]></b:skin>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
<script type='text/javascript'>
// Place all Javascript code here
$(document).ready(function(){
$(&quot;#showPopup&quot;).click(function() {
$(&quot;div#Popup&quot;).addClass(&quot;show&quot;);
return false;
});
$(&quot;#closePopup&quot;).click(function() {
$(&quot;div#Popup&quot;).removeClass(&quot;show&quot;);
return false;
});
});
</script>

This is CSS code.

Add this just above to ]]></b:skin>. This code includes CSS for button(.button and .button:hover) and code view(pre and code). If you already have this codes remove that parts and use others. First six lines are essential.

div#Popup{ position: absolute; top: 40px; width: 560px; left: 170px; border: solid 1px #bbb; padding: 20px; background: #fff; -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25); opacity: 0.0; -webkit-transition: opacity 0.0s ease-out; z-index: 0; }
div#Popup.show {
opacity: 1.0;
z-index: 100;
-webkit-transition-duration: 0.25s;
}


pre { background: rgba(0,0,0,.75); margin: 0 0 18px; padding: 13px 18px 14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 1px 1px #fff; font-size: 11px; line-height: 16px; font: 12px/18px "Monaco","Courier New","Courier",monospace;color:#fff;}

code{ color:#fff;background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); font: 12px/18px "Monaco","Courier New","Courier",monospace;}

.button{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5);
color: #FFFFFF !important;
background:#33AD33;
cursor: pointer;
font-weight: bold;
line-height: 1;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
padding:1px 4px 1px 4px;
}
.button:hover{ background:#327F32;text-decoration:none;}

Now save the template.

After adding the above codes to the template, add the following code to the post.

<div id="Popup">
<h3>
Heading</h3>
It appears based on one line of javascript and
can be dismissed using the OK button below.
Pretty simple, right?<br />
Add your code here.. If you want to display an image here,
remove pre tag and replace with img tag.
<br />
<a class="button" href="" id="closePopup">OK</a>
</div>

This is the button code. Add this wherever you want to show your button.

<a href="" id="showPopup" class="button">Show the Popup box</a>

Share this article