Opening Modal View on a Modal

[kirandeep123]

I tried to open calendar modal view in a popup modal but I am seeing inline view i.e. not able to see close button and modal view in a modal .

Is it some Issue or do I need to include some attribute ? Please Suggest . Please find attached Screenshot which shows date-picker modal in a popup modal .

[eureka2]

I do not see the attached screenshot

[kirandeep123]

[eureka2]

Go to http://eureka2.github.io/ab-datepicker/ and click on modal:

The script is then:

$(document).ready(function() {
    $('#date').datepicker({
        modal: true,
    });
});

You can see the close button ....

[kirandeep123]

Hi , That is Fine .I am using modal attribute and this is working fine in all locations in our application but the issue is when I already have a modal/popover say which is opening in an iframe and I am then implementing datepicker on that modal with this modal attribute set to true its not working and is showing me the same inline view .

If you have checked the screenshot I attached its a modal which is opening in an iframe and I am trying to open a datepicker modal within that modal .

let me know if you still have questions/concerns/suggestions

[eureka2]

I will try to reproduce this issue. Which component do you use for your modal dialog?

[kirandeep123]

Hi , we are using iframe to open modal dialog and rendering our JSP in that div which contains this frame . You can find code here :

[eureka2]

Ok, but where are the scripts defined? In the page? in the iframe? Do you use bootstrap modal.js : https://getbootstrap.com/docs/3.3/javascript/#modals ? Please, give me more elements so that I can test!

Best regards

[kirandeep123]

Hi , Scripts are defined in the page . No we are not using anything like bootstrap modals . we are just setting modal attribute to true and we are done and this is working as intended on normal pages but issue is with iframe .

what types of elements are you asking for ?

[eureka2]

The title of this issue is

Opening Modal View on a Modal

So, there are two modal windows. the first is your modal dialog box, the second is the datepicker.

To my knowledge, an iframe or a JSP can not popup a modal dialog box on the browser, only a Javascript code can do that.

In my opinion, there is a conflict between this Javascript code and the datepicker.

If you do not say what you use as Javascript code to display your modal dialog box, I will not be able to test.

[eureka2]

I partially reproduced your dialog box here and there is no problem

[kirandeep123]

Can you share the code or exactly what you used ?

[eureka2]

The HTML page: modal-on-modal.html.txt

The content of the IFRAME: modal-on-modal-iframe.html.txt

[kirandeep123]

If I close main modal without selecting any date after opening datepicker and again open modal from ' add remainder ' button ,datepicker remains open .

can you please check on this ?

[eureka2]

The datepicker does not know that it's in a modal and that this modal has been hidden. It is the responsibility of the app to handle this.

To illustrate, I added this in the iframe code:

window.parent.$('#myModal').on('hidden.bs.modal', function (e) {
   $('#send-date').datepicker('hide');
})

[kirandeep123]

Okay it fixes the problem I guess . Thanks for working on this .

[eureka2]

You're welcome !