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:
- DTML Calendar – http://www.dynarch.com/projects/calendar/
- ModalBox – http://okonet.ru/projects/modalbox/
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.
Juice Bar 
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?
Francesco,
Did you make sure that the inputField f_date_b exists?
Juice,
yes sure. I don’t understand because it appears.
In my experience I have understood that JS loaded throught XHR isn’t evalued in automaticatic. Youhaveto evaluate che XHR response
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.
I know this is a bit late, but thanks for the hint.
This problem still exists and your solution helped.