Question

This is a weird one, but…

We have this code:

jQuery(function($) {
    $('#basic-modal .basic').click(function(e) {
        $('#basic-modal-content').modal();

        return false;
    });
    $('#basic-modal-also .basic').click(function(e) {
        $('#basic-modal-also-content').modal();

        return false;
    });
});

Which launches either of two modal windows.

Their code is:

< !-- First Modal Window -->
<div id="basic-modal-content">
    <h3>Modal Window 2</h3>
    <p>any <strong>html</strong> content or images can go in here </p>
</div>

< !-- Second Modal Window -->
<div id="basic-modal-also-content">
    <h3>Modal Window 1</h3>
    <p>any <strong>html</strong> content or images can go in here </p>
</div>

What I am finding is onclick we launch the modal, and it shows its content. We close it, and when we open it again, its content is empty..

Is there something painfully obvious, do we need to flush anything, or perhaps I need to give you some more code ?

We use Eric Martins simplemodal script. http://www.ericmmartin.com/projects/simplemodal/

Ok Seemingly we have a conflict not sure what is causing it.

We have simplemodal and simplecountdown .
Simple Modal code: http://www.ericmmartin.com/projects/simplemodal/
Simple Countdown code: https://github.com/hilios/jquery.countdown/

Wonder if anyone has come across this conflict. I will also ask eric on Google

Answer 1

A lot of times a modal will dispose of the content or hide it in some way. Modal scripts often don’t account for the fact that you might open it again. They assume that you will only open it, do XYZ in the window, then move on. One thing I’ve done with situations like this is to reload the content via jQuery every time you fire the modal, if this is in fact the case. I would use this:

    <div id="modal">content will land here</div>
    $('#modal').html('<p>any html content or images can go in here </p>');

It is hard to tell if this really is your issue, but it is something I have run into a lot with modal dialogs.