How To Add Together A Pop-Up Window Using Css3 In Addition To Jquery Inwards Blogger To Display Rootage Code Pictures

Adding a pop-up windows is really slowly amongst the introduction of CSS3. It tin survive used to display origin code, pictures in addition to whatsoever nosotros want. This post service describes how to add together a unproblematic pop-up window to blogger using CSS3 in addition to a duo lines of jQuery....

View the Demo
First nosotros necessitate to edit the Template. Go to edit HTML from Template.

This is the jQuery codes.

Check your template for cherry colored code. If it is already there, hence skip that line. Copy other lines in addition to glue only 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 hither $(document).ready(function(){ $(&quot;#showPopup&quot;).click(function() { $(&quot;div#Popup&quot;).addClass(&quot;show&quot;); provide false; }); $(&quot;#closePopup&quot;).click(function() { $(&quot;div#Popup&quot;).removeClass(&quot;show&quot;); provide false; }); }); </script>  

This is CSS code.

Add this only higher upwards to ]]></b:skin>. This code includes CSS for button(.button in addition to .button:hover) in addition to code view(pre in addition to code). If yous already convey this codes take away that parts in addition to utilization others. First half dozen lines are essential.

div#Popup{ position: absolute; top: 40px; width: 560px; left: 170px; border: company 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: company 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 salve the template.

After adding the higher upwards codes to the template, add together the next code to the post.

<div id="Popup"> <h3> Heading</h3> It appears based on 1 delineate of piece of job of javascript in addition to  tin survive dismissed using the OK push below.  Pretty simple, right?<br /> Add your code here.. If yous desire to display an epitome here, take away pre tag in addition to supervene upon amongst img tag. <br /> <a class="button" href="" id="closePopup">OK</a> </div>

This is the push code. Add this wherever yous desire to demo your button.

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

Share this post