simple confirmation popup
June 10, 2014 | 34 Feedbacks

Simple confirmation popup

Simple responsive confirmation dialog box, with a subtle CSS3 entry animation.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Chances are there’s no web project you realized that didn’t involve the creation of a popup message: whether it’s a confirmation for deleting an item or for adding an item to the cart, popup messages are always part of the flow. Hence we created this simple yet handy resource, whose only enhancement is a subtle entry effect.

Creating the structure

The HTML structure is very basic: a .cd-popup div that contains the entire popup (including the semi-transparent background), a .cd-popup-container that is the content wrapper, an unordered list for the 2 call-to-action buttons and the anchor tag that is used to close the popup.

Adding style

The only thing worth pointing out about the CSS is the nice transition when the popup becomes visible. It’s achieved by combining the visibility and opacity properties with a CSS3 transition. For the content wrapper, the default position is slightly translated up at the beginning (transform: translateY(-40px)), and modified at the end of the transition to translateY(0).

Events handling

In jQuery we just added/removed classes, no trick to learn here.

Any feedback/suggestion, feel free to leave a comment ;)

Changelog

Jun 10, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • http://html5-ninja.com/ HTML5 Ninja

    very nice

  • http://www.nbrogi.com/ Niccolò Brogi

    Between lovely and genius. Good stuff, Sebastiano.

  • Sebastiano Guerriero

    Glad you like this snippet guys, it’s quite basic but can be very handy if you’re building a website without using frameworks like Foundation/Bootstrap ;)

  • Roberto Moya

    Keep them coming Sebastiano. Simple and yet so needful.

  • http://www.redbearded.com/ Cody

    Awesome!

  • http://www.marcusforsberg.net/ Marcus Forsberg

    Great work as always!

  • Johan Adda

    It’s an alert box. The cross is confusing.

  • cjroebuck

    Nice! could also mark it up using the new dialog element, now supported in chrome beta: http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html?m=1

  • sairam

    while clicking on no button . its not working properly

  • Matthias Walti

    Hi Sebastiano, you guys continue to amaze me…:-) Is there a simple way to have the modal positioning being relative? My trigger is at the end of a longer content area, which requires scrolling to top in order to see the modal (especially on mobile).

    • http://codyhouse.co Claudia Romano

      Hey Matthias, thanks! :)
      The modal is in fixed position (which means it’s relative to the viewport and not to the content) so you won’t need to scroll, even if the trigger is a the end of the page.

      • Matthias Walti

        Mmmh, seems to be a problem with my implementation on the page, and with Safari only… Source code is working well indeed… Thank you so much!

  • Squido

    Can’t extract the rar file, can you please look at it? Thanks!

  • Himanshu Sharma

    Lovely Work!!.. (y)..

  • sid

    can i use this with multiple popups on same page ?

  • Maarten

    How can I align this box vertically centred, always, not matter how much text there is in the popup window?

    • http://codyhouse.co Claudia Romano

      Hi Maarten, you should try setting a top: 50% and a transform: translateY(-50%) to the .cd-popup-container. Hope this helps!

  • Joshua

    How would I make this automatically pop on page load?

    • http://codyhouse.co Claudia Romano

      Hi Joshua, try adding, in the index.html file, the is-visible class to the div.cd-popup element.

  • UMESH SHEJOLE

    Nice Plugin thanks for share !

  • Gladys Benigni

    Nice Plugin thanks, muchas gracias está genial! :D

    • scott

      Gladys… would you be willing to help me use the “Simple confirmation popup” within a page that has some dynamic PHP used to retrieve/display an error message to the user?

      I would truly appreciate your help.

  • scott

    For the totally new to this concept, what are the jQuery added/removed classes, to make it work? I am really new to all things web/css/jQuery/PHP/MySQL.

    • akshay

      scott he just add class to to html via javascript so you can toggle the look or any other attribute or behvior
      of that element

  • Goran

    Hi Claudia and Sebastiano, what a great things you two make.. its inspiring.

    Regarding this popup, can you point out how to make 2 or 3 of this popups to work on same page?

    Thanks

    • http://codyhouse.co Claudia Romano

      Hi Goran, you should try adding a class/data-type to the modal trigger, and then use it to target the popup to open. Hope this helps!

    • Jasper

      Hi Goran, did it worked out for you?
      I would be glad if you can tell me the solution.
      Thanks!

  • akshay

    that is cool just a aesthetic make-up for bootstrap modal

  • Дом Спасения

    Thanks for good plugin!. I made mobile menu on my site with it and i need to close popup when clicking on link iside.

  • Costea Mihai

    New website:
    Asigurari Bulgaria IEFTINE

    Primul portal online din Romania care ofera clientului posibilitatea de a NEGOCIA PRETUL asigurarii de bulgaria.

    Asigurari Bulgaria IEFTINE este solutia pentru a cumpara o asigurare CORECTA la un PRET CORECT.
    Preturile sunt NEGOCIABILE.

    Suntem o echipa tanara dar avem ambitii mari. Avem doua birouri in Constanta si la Dobrich in Bulgaria.
    Oferim SERVICII CORECTE la PRETURI CORECTE.
    Avem colaboratori in Bacau, Brasov si Iasi.

    Big Like
    http://www.asigurari-bulgaria-ieftine.ro

    Contactati-ne
    Vom raspunde imediat solicitarii Dumneavoastra.

  • http://www.thehinh.com Thể Hình Channel

    How i can call it auto when load page but not click in button ??

    • Zombie Zocker

      $(document).ready(function() {
      $(“.cd-popup”).show();
      });

      that should work