Hello, Modal popup is become common and popular today by the using of this code we can customize some extra feature like log in, sign up, comment box, or contact form etc.
Now I'm going to share simple coding to create modal popup for your blog and website needs.
(We are hosting all jquery and css file to own server to make modal plugin more easier)

Add modal contact form to Blog:

1. Sign in to your Blogger account and go to Layout
2.  Now click on  "Add a Gadget" link and "More Gadgets"
3. Now find "Contact form" page element and click on it
4. Contact-Form-Page-element
5.  If you want to change the title of the contact form widget, so alter it. Then click on "Save" button.

Demo

Hide contact form widget in Blogger

Hide official blogger contact form widget which showing in the sidebar.  One method is removing the contact form html source code. But when you want to show it again in the sidebar, you might be confused.  It is easy to add. But let's do some works. You can hide contact form gadget using CSS. Whenever you want to show contact form, you just need to remove the piece of CSS code from  the template.
Now go to  Edit Template and paste below code just above of ]]> code in the blogger template.

#ContactForm1
 {
 display: none ! important;
 }

Now you can easily add contact form modal plugging via adding Html/java script code by your blogger dashboard.
Copy paste below code (No need of changes).

Copy Code From Here !

<link rel="stylesheet" href="http://demo.tricksway.com/modal1/reveal.css" /> <!– Attach necessary scripts –>
 <script type="text/javascript" src="http://himstar.googlecode.com/files/jquery.reveal.js"></script>
 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">
 <b>Contact Me</b>
 </a>
 <div id="myModal" class="reveal-modal">
 <div dir="ltr" style="text-align: left;" trbidi="on">
 <form name="contact-form">
 <div>
 Your Name : </div>
 <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30″ type="text" value="" />
 <div>
 Your Email: <em>(required)</em></div>
 <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30″ type="text" value="" />
 <div>
 Your Message: <em>(required)</em></div>
 <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5″></textarea>
 <br/>
 <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send"/>
 <div style="max-width: 350px; text-align: center; width: 100%;">
 <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
 </div>
 <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
 </div>
 </div>
 </form>
 </div>
 <a class="close-reveal-modal">&#215;</a>
 </div>

Note: Above Ajax script in not necessary if you are running your blog on latest ajax. We hosted codes to our secure server so don't worry about it also there is no huge scripts so it's light weighted code.