Home > Ruby on Rails, Web Development > DHTML Calendar and ModalBox

DHTML Calendar and ModalBox

If you have been trying to do a calendar pop-up within a form encapsulated around a modal box, then you are likely to encounter this problem where by the calendar doesn’t pop up.

Before we go any further, the software I’m using are:

The reason why it doesn’t pop-up, or rather it actually does, is that if you observe the modal box carefully, there are actually 2 layers.  The bottom smoked-out layer is the parent document.  When the modal box appears, that element’s z-index (set at 10000 by ModalBox) is brought up higher than the parent document, hence layered above the parent document.  When you click on the calendar link, it’s z-index is equal to the parent document’s, hence below the modal box.  Which means, the modal box is covering it, so you couldn’t see the calendar, even though it’s there.

If you set the calendar’s z-index to be equal to the modal box, the other problem will be its position.  The modal box’s position is set to “fixed”, so when you scroll the page, the form encapsulated by the modal box doesn’t move, but the calendar and the parent document moves with the scrolling.  Therefore, IF your link which opens the form-in-modal box is at the bottom of a long page, your calendar pop-up can be at the top of the page, which means you won’t be seeing it too.

Therefore, in order to have a calendar pop-up in the form-in-modal box, your calendar’s css style needs to set the position to “fixed, and the z-index to “10000”.  This will require you to change the codes in DHTML calendar.

I am currently trying to get in touch with Mihai Bazon.  Hopefully I can contribute my modifications to his product, so that everyone else can use it too.

  1. Francesco
    July 31, 2007 at 10:47 pm

    I have a problem with the Dynarch’s DHTML Calendar into a Modalbox form.

    <a href=”modalbox.htm” title=”Simple form” rel=”nofollow”>Show a modalbox
    </a>

    The html code of the modalbox.htm is:

    Calendar.setup({
    inputField : “f_date_b”, //*
    ifFormat : “%m/%d/%Y %I:%M %p”,
    showsTime : true,
    button : “f_trigger_b”, //*
    step : 1
    });

    Can you help me, please?

  2. August 1, 2007 at 9:38 am

    Francesco,

    Did you make sure that the inputField f_date_b exists?

  3. Francesco
    August 2, 2007 at 2:34 pm

    Juice,
    yes sure. I don’t understand because it appears.

  4. December 23, 2007 at 4:34 am

    In my experience I have understood that JS loaded throught XHR isn’t evalued in automaticatic. Youhaveto evaluate che XHR response

  5. October 7, 2009 at 10:35 pm

    hola he estado buscando una respuesta precisamente a esto que planteas dado que quiero utilizar este calendario en una ventana modal y aun no logro conseguir hacerlo funcionar. quiero si te es posible y tienes la solucion a ello pudieses compartirme que cambios realizar en el CSS para que funcione adecuadamente.

    Desde ya mil gracias.

    Atentamente
    Raymundo Bautista.

  6. Aaron
    January 22, 2011 at 12:53 am

    I know this is a bit late, but thanks for the hint.
    This problem still exists and your solution helped.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: