Open a modal, from a modal

[Kenneth]

Pretty simple issue. I can do this. I can see that the 2nd modal opened but it is behind the first modal. I tried by setting z-order but it didn't seem to have an effect.

Any solutions?

[Alexander Valchev]

Hi Kenneth,

This is not a very common scenario. I tried to reproduce the behaviour using a very simple configuration but to no avail. Could you please check my sample and let me know what I am missing?

• http://jsbin.com/umohuj/2/edit

Can you reproduce the issue inside the test page and send me back a link to the updated version? In this way I would be able to examine your configuration in details and assist you further.

Thank you in advance for the cooperation. Looking forward to your reply.

Regards,
Alexander Valchev
the Telerik team

[Oscar]

Related to this problem, when you have the second modal window opened, if you click anywhere out of the modal window, the first modal window will close, is there any way to keep the first one opened and close instead only the second one?

Thanks

[Alexander Valchev]

Hello Oscar,

I am afraid that such scenario is not currently supported.
Please accept my apology for the inconvenience caused.

Regards,
Alexander Valchev
Telerik

[Oscar]

Ok Alexander, no problem, thank you.
I have managed somehow to make it work like I expected.

$('.km-shim:last').bind('touchstart', function(e) {
    e.stopPropagation();
});

So with those lines, though maybe it is not the best way to do it, I can prevent the modalviews from being closed when you click out of them.
Thanks again.

[Rob]

This is a common occurrence in my applications. Really should get this fixed!

Edit: I tried your fix, but it didnt work.
I implemented it on the document ready, after my kendo app is initialized and all modals are created.
What am I doing wrong?

Also I believe this used to work, but it stopped working when I upgraded to the newest version in order to get the Flat UI addition.

[Oscar]

Yeah, sorry, looks like my fix only works on Icenium (weird).

[Craig]

Ran into the issue of the 2nd modal showing up behind the 1st modal myself.

I found the fix!

The order of the when the modalview is defined in your HTML page matters.  Define your modal from lowest level to highest level in the HTML:

Example:

<div id="foo" data-role="view">
    <a href="#modal1" data-role="button" data-rel="modalview">Open Modal 1</a>
</div>

<div id="modal1" data-role="modalview" style="width: 90%; height: 70%;">
    modal view 1
    <a href="#modal2" data-role="button" data-rel="modalview">Open Modal 2</a>
</div>

<div id="modal2" data-role="modalview" style="width: 90%; height: 70%;">
    modal view 2 (I will open up on top of modal view 1 like we want)
</div>

[Don]

Unfortunately, Craig's solution is not working for me using Kendo UI Mobile v2013.3.1526.  I have 3 modals that open one on top of the other.  The first two are usually ok but the 3rd always appears sandwiched between the 1st and 2nd.  Please fix this.

[Don]

UPDATE:  Actually, Craig's fix was on the right track.  However, it appears that it's not that "the order of the when the modalview is defined in your HTML page matters" but rather the order in which the modalviews are initialized.  So, if you are initializing your modalviews in the HTML then Craig was spot on.  However, if you are using jquery syntax to initialize your modalviews, you need to make sure that the ones you want on top are initialized last in the script.  In that situation, the order of <divs> in the HTML doesn't matter.