Open-Close Modal issue in Internet Explorer

问题

I have a modal window (using bootstrap), with a close button. The modal window opens and closes fine in most browsers. However, in internet explorer, there is a problem. We can open the modal window fine, and close it fine ... but if we try to open it again, it wont.

Most of the javascript functionality is in bootstrap. Below is the html for the open button [I believe data-toggle="modal" and data-target="#exampleModal" are the key to opening the window]...

    <a href="javascript:void(0)" id="navdemo" data-toggle="modal" data-target="#exampleModal">Get The Demo</a>

...and the html for the start of the modal window, with the close button [note the id="exampleModal" tells which window to open. And the data-dismiss tells to close "modal"...

<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="padding-right: 17px; display: block;">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <!-- CLOSE BUTTON -->
            <div class="row at-modal-close-box">
                <a href="#" data-dismiss="modal" aria-label="Close">
                    <img src="https://www.amazingdg.com/_dev/temp/images/modal-close-btn.svg" alt="Close Demo Form">
                </a>
            </div>
    ...

You can view the page here: https://www.amazingdg.com/_dev/temp/

Note: When I click the open button a second time, there is an error in IE's console ... Object.keys: argument is not an Object. Note: this error doesn't occur the first time opening the modal window. Not sure how to fix it...

---------------------------------------------------

I tried to remove the fade class ... that made the modal window show ALL of the hidden elements in the form (required fields, successfully sent message, etc.)

if ($.browser.msie) {
 $("#exampleModal").removeClass("fade");
}

---------------------------------------------------

I tried to change the fade transition (not supported by IE) using an IE media query. This removed the fade, but didn't fix the issue.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */
    .fade {
        transition:none !important;
    }
}

回答1:

I had a similar issue on IE, and it was solved by doing the following:

Whenever you open the modal, using:

modal.element.modal();

Send in an empty object, like this:

modal.element.modal({});

This fixed the issue for me in IE (without the need to mess with the fade classes) and didn't change the behavior in other browsers!

回答2:

Remove fade class which does not work in IE

if ($.browser.msie) {
 $("#exampleModal").removeClass("fade");
}

来源：https://stackoverflow.com/questions/49902103/open-close-modal-issue-in-internet-explorer

标签

popup

bootstrap-modal