Html – How to show a modal pop up above other modal pop up

htmljquery

I have a Modal Pop up . When I click on a button in the Modal Pop Up, another Modal Pop Up shows up. But some of the second modal pop up it hides behind the first modal pop up. How to make it show above the first modal pop up.

Any ideas and suggestions are appreciated !

Best Answer

Try setting the z-index of the popup wrapper you want above greater than the other..

#popup1 {
   z-index: 9997;
}

#popup2 {
   z-index: 9998; // This will come above popup1
}

This is provided that #popup1 and #popup2 have the same parent.

Related Solutions

Javascript – How to check if an element is hidden in jQuery

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

Jquery – How to format a Microsoft JSON date

eval() is not necessary. This will work fine:

var date = new Date(parseInt(jsonDate.substr(6)));

The substr() function takes out the /Date( part, and the parseInt() function gets the integer and ignores the )/ at the end. The resulting number is passed into the Date constructor.

I have intentionally left out the radix (the 2nd argument to parseInt); see my comment below.

Also, I completely agree with Rory's comment: ISO-8601 dates are preferred over this old format - so this format generally shouldn't be used for new development.

For ISO-8601 formatted JSON dates, just pass the string into the Date constructor:

var date = new Date(jsonDate); //no ugly parsing needed; full timezone support

Best Answer

Related Solutions

Javascript – How to check if an element is hidden in jQuery

Jquery – How to format a Microsoft JSON date

Related Topic