Life's easy with Medialoot.

Unlimited access for only $14/mo.

HTML/CSS Modal Web Boxes

HTML/CSS Modal Web Boxes : Image 1
HTML/CSS Modal Web Boxes : Image 2
HTML/CSS Modal Web Boxes : Image 3
HTML/CSS Modal Web Boxes : Image 4
HTML/CSS Modal Web Boxes : Image 5

This week’s freebie is a set of coded and ready-to-use HTML/CSS modal pop-up boxes. Included in the download are all necessary HTML, CSS, and image files including sample code and demonstrations (jQuery is used via Google API). Also included is a layered .psd file for easy customization.

These web boxes are fast to implement using HTML/CSS, easy to customize using the included Photoshop files, and are perfect for variety of interface and marketing applications.

Take a look at the demo to see for yourself, or see below for a list of what’s included:

  • Free Download
  • Mailing List
  • Restricted Content
  • Saved to Favorites x2
  • Adjust Settings
  • Warning
  • Error

Free License

Feel free to download and use this item for both personal and commercial projects with attribution back to MediaLoot. Please note:

  • Attribution is required for free items. For a non-attribution license, please become a member or buy the full version.
  • You may not distribute or offer this set for download on other websites. Promotion is always appreciated, but please send people to this page.

More from User Interface » Coded Elements

Oct 19th 17718 10
Free
Oct 13th 2483 1
Free

Comments

  • Reply »
    artnook

    artnook

    Nice work.

    Mar 29, 2012 at 10:51 am
  • Reply »
    Ramakanth

    Ramakanth

    How about the Browser Compatibility?

    Mar 29, 2012 at 10:55 am
  • Reply »
    Annemarie Diffenderffer

    Annemarie Diffenderffer

    Super duper!  Thanks!

    Mar 29, 2012 at 11:25 am
  • Reply »
    Triyas Agus

    Triyas Agus

    Good Job, thanks for the resources.

    Mar 29, 2012 at 11:30 am
  • Reply »
    Natalie Hipp

    Natalie Hipp

    Hey Ramakanth,

    We’ve tested it in IE 7+, Chrome, and FireFox for Windows, and Safari, Chrome, and FireFox for Mac, so it should be very cross browser compatible. If you run into any trouble, let us know!

    - Natalie

    Mar 29, 2012 at 12:40 pm
  • Reply »
    João Paulo (Brasil)

    João Paulo (Brasil)

    Congratulations for the great job and thanks for sharing

    Mar 29, 2012 at 1:00 pm
  • Reply »
    nuril

    nuril

    Thanks .. nice =)

    Mar 29, 2012 at 7:52 pm
  • Reply »
    i8pikachu

    i8pikachu

    I’m experiencing a flicker, which means the HTML is loading before the JQuery is loaded. 

    To illustrate, I see the modal window on load and then it disappears.

    I pull JQuery from Google and it appears within the Header above the HTML.

    The way this is written, it relys on JQuery to hide the modal windows.  But if JQuery loads slowly, it will cause a flicker.

    The solution to this is to made the window invisible by default: visibility:hidden and then on click make it visible.  I know this can be done…

    Anyone?

    Mar 29, 2012 at 9:10 pm
  • Reply »
    i8pikachu

    i8pikachu

    I found a simple solution.

    Before, I was adding:  style=“visibility:hidden” to the div of the modal-window.  This didn’t work so I couldn’t figure it out.

    But when I used style=“display:none” to the div, it works.  The flicker is gone!

    Thanks for the simple script!

    Mar 29, 2012 at 9:30 pm
  • Reply »
    Puneet Chopra

    Puneet Chopra

    Good One! Good Job Done….....

    Mar 30, 2012 at 1:09 am
  • Reply »
    Niall

    Niall

    These are really cool! Thanks!

    Mar 30, 2012 at 8:28 am
  • Reply »
    Leandro

    Leandro

    Hey man, good job, really good! i go recommend Medialoot to my friends

    Mar 30, 2012 at 9:35 pm
  • Reply »
    Agence Web Ile Maurice

    Agence Web Ile Maurice

    Hi, thanks for this great freebie!

    Apr 8, 2012 at 6:57 am
  • Reply »
    Geekyard

    Geekyard

    Great work I love your site very much :) Got inspired at first look. It’s clean and stylish ;)

    Apr 14, 2012 at 9:00 am
  • Reply »
    Sandeep

    Sandeep

    This is called Awesome. Seller giving us his premium design to us.. that’s we called him Awesome..

    Jun 17, 2012 at 12:42 am
  • Reply »
    sarah

    sarah

    Awesome work, and beautiful boxes! Is there a way to make the box disappear by clicking outside of the box, instead of having to click the little “x” each time?

    May 2, 2014 at 1:58 pm

Leave a comment

Tag Cloud

Don't Miss Another Freebie - Sign Up for Our Newsletter!

Make sure you don't miss out on future free resources by signing up for our weekly newsletter.

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all