Zebra_Dialog, a lightweight dialog box jQuery plugin

Get the latest updates on this jQuery plugin via RSS

You are currently browsing comments. If you would like to return to the full story, you can read the full entry here: “Zebra_Dialog, a lightweight dialog box jQuery plugin”.

392 responses to “Zebra_Dialog, a lightweight dialog box jQuery plugin”

Follow the comments via RSS
  • Cyzaine, 2014-07-08, 21:23

    Just in case anyone else is having similar issues…

    Was having some trouble with the ‘top’ of the dialog boxes regardless of the theme. The size of the top was not in sync with the size of the rest of the box.

    After some trial and error, I found out that the top of the box was inheriting the changes I had made to the tag in the pages CSS. Ended up removing the styles to the tag, and the zebra dialogs were working perfectly again.

  • Era, 2014-07-24, 06:29

    How do you change the focus of the buttons?

  • jeguer94, 2014-08-14, 21:51

    I think I’ve found a bug.
    If a Zebra_dialog is shown and then another Zebra_dialog opens up, the first dialog cannot be closed, even after the second dialog is closed. I don’t know how to explain it in English, but here is how to reproduce it:
    Open a Zebra_dialog, then, using a setInterval open another Zebra_dialog, the second works fine, but the fist one cannot be closed.

    • Stefan Gabos, 2014-08-16, 07:51

      use “new $.Zebra_Dialog” instead of just “$.Zebra_Dialog”

  • Art, 2014-08-28, 18:12

    Great plugin, thanks! I do have a question… on a webpage that has content whose length is only 1/2 down the page (that is the bottom half of the page is empty) the overlay only overlays the top half with the gray, the bottom half is still white.

    Any ideas??

  • Lonestar Jack, 2014-09-07, 20:11

    I have a page with several fields and a dropdown box to select a category.
    I have a button to “Add a Category” which I want to call either a popup or dialog to:
    input a new category, and an “Add Record” button which will make an Ajax call to insert into a Mysql table, and a “Close” button.
    What plug-in or module would you suggest I use?

  • laurent, 2014-09-18, 15:57

    any chance to make it draggable ?

    • Stefan Gabos, 2014-09-24, 09:12

      no, currently that is not a priority

  • Phil, 2014-09-25, 09:11

    Hi Stefan.. a gem of a dialog.
    Got it working very well from a click on a span element. However, on second click nothing happens except ‘undefined is not a function (against var zd = line). Do I need to destroy the dialog to reopen it? Or is there a way to test that it is open and reuse it?

    var zd= new $.Zebra_Dialog(”, {
    ‘source’: {‘ajax’: ‘/calendar?ID=7654’},
    buttons: false,
    modal: true,
    overlay_close: false,
    position: [‘center’,’top + 50′],
    show_close_button: true,
    type: false,
    ‘title’: ‘Instant Booking’

    Thanks for your help.

    • Stefan Gabos, 2014-09-25, 09:56

      there’s no “open” method…just delete the “zd.open()” line

    • Phil, 2014-09-25, 10:02

      Thanks Stef… tried deleting zd.open() but still get the same issue Uncaught TypeError: undefined is not a function

    • Stefan Gabos, 2014-09-25, 10:39

      make sure you cleared your cache (or try in incognito window)

    • Phil, 2014-09-25, 12:36

      No go I’m afraid. Tried incognito in Chrome and also cleared the cache.

  • Arun, 2014-09-30, 04:55

    Hi Thanks for plugin,

    I found a issue – When i have a alert box on my page, i cannot click anywhere like other websites or search box at the top. It keep flashing me to click alert box before proceeding further.

    But with this i can do the same. Is there anyway this can work exactly like alert box because its UI/ CSS is really great.


  • Elias Vemeri, 2014-11-10, 18:24

    Hi Stefan,

    I’m trying to superimpose two Zebra dialogs and make them “escable” in reverse order of appearance.

    I’m calling some AJAX content into the first dialog. Then, clicking on a button inside that first dialog triggers a warning, the second dialog. Escape clears both dialogs. The Enter key closes the most recent one but is then disabled in the first one. Escape too.

    Is there a way I can make these dialog boxes react better when there’s one over the other?

    Thank you very much for your answer,


  • Pankaj Agrawal, 2014-11-17, 13:00

    I am using the zebra dialog box in my application. But I am facing a problem that is I am call a ajax request and I want to open the zebra dialog box in response of the ajax (success method of ajax). but I am not able to do that. I am using the bootstrap and coloradmin template.

  • Kaustubh, 2014-11-19, 16:45

    The dialog is awesome. Please make it draggable so that we can keep the height of dialog as auto.

  • Jib, 2014-12-03, 08:51


    Thanks for Super Great and easy to use plug-in. Simple question .. How a change button color from blue to anything else? Can i use image for buttons?

    Thanks Once Again .. 🙂

    • Stefan Gabos, 2014-12-03, 10:34

      Whatever you want…everything is in the CSS file

  • lucas, 2014-12-11, 21:57

    Hi, Stefan.
    First atl all, great plugin. Now, i would like to send some data and show the result via AJAX. Is there any way to do this ?


  • Donald, 2014-12-19, 12:32

    Hi Stefan.

    i really like this plugin, great work. I have one question though. How can I add a href action to a button?

    Thank you so much

  • Semih MEMIS, 2014-12-21, 16:24

    how can i do that;

    (input type=”button” onclick=”alert(xConfirm());” value=”Confirm”)

    function xConfirm(){

    $.Zebra_Dialog(‘Zebra_Dialog, a small, compact and highly’ +
    ‘configurable dialog box plugin for jQuery’, {
    ‘type’: ‘confirmation’,
    ‘title’: ‘Title’,
    ‘buttons’: [
    {caption: ‘Yes’, callback: function() { return 1;}},
    {caption: ‘No’, callback: function() { return 2;}},
    {caption: ‘Cancel’, callback: function() { return 0;}}


    When i click button, undefined alert shown, and ‘Yes’,’No’,’Cancel’ button nothing to return a value.



Leave a Reply

Your email address will not be published
You can use <strong>, <em>, <a>, <img>, <code>
Characters are not case-sensitive