Avoid having to set inline styles to hide modal by default

[cyphix333]

I have just started using this and everything was working fine, but then noticed the modal was showing on the page by default (right down the bottom); shouldn't the modal be hidden by default!?

This is caused by the display: inline-block; style in the .modal class.

I tried fiddling around a bit but nothing seems to work perfectly unless you set an inline-style for the element with the .modal class to display: none;.

This is a great modal script, but having to manually set an inline-style on every modal you have isn't so great.

Apologies if you don't have to do this and I'm doing something wrong here, but I checked your examples page and that's how you were doing it as well.

[Accomp]

The workaround I found to this was setting display: inline-block; and opacity: 1; to .modal. This allowed the ability to get rid of those inline styles, as well as still maintain a clean transition when opening for the first time.

[cyphix333]

@Accomp Trouble is it would still take up space on the page and leave a big white blank area.

[smirnowld]

A workaround for this is wrapping the modal inside an element whose display is set to none:

<section class="modal-wrapper">
  <section id="form-errors" class="modal">
    <section class="error-container">
      <h4>Some of the input is invalid, please see below for details.</h4>
      <ul></ul>
    </section>
  </section>
</section>

.modal-wrapper {
    display: none;
}

This means that the modal is both not shown and is not taking any space, but will be correctly displayed once opened.

[Accomp]

Yep, you'd still need to hide the original content if you're writing it out on the page. The shown modal content is just a duplication of that in the bottom of the DOM.

[kylefox]

I agree, this isn't ideal.

Elements on the page with class .modal should be hidden by default with display: none; and then made visible programmatically, either by changing the display of the modal inline or adding a modifier class such as .modal-visible.

Whatever the approach is, it should be backwards compatible. Perhaps the safest thing to do is:

1. Default .modal { display: none; }
2. When opened, set this.$elm.css('display', 'inline-block');

Thoughts?

[cyphix333]

Sounds good, just don't forget you will obviously also need to remove the inline style inline-block when the modal is closed otherwise the inline style will continue to override any other styles.

[smirnowld]

Sounds good, although I'd side with the addition of the .modal-visible class rather than changing display property inline.

[thewhiterabbit]

I'm under the impression this hasn't been fixed yet?

[sshadmand]

I just downloaded and used the script and had the same issue. Has not been fixed yet and @smirnowld's fix worked easiest for me; just use a wrapper.

That being said, it is very strange that a modal package would not come with it's modal pre-hidden. fwiw.

[jserrao]

@kylefox - this would be pretty easy to fix. Just attach the following to whatever event fires on page load:

$(this).css('display', 'none');

This is exactly what I do as an override.