Internet Explorer中的“打开-关闭模式"问题 [英] Open-Close Modal issue in Internet Explorer

问题描述

我有一个模式窗口(使用引导程序)，带有一个关闭按钮.在大多数浏览器中，模态窗口可以正常打开和关闭.但是，在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.

大多数javascript功能都在引导程序中.下面是打开按钮的html [我相信data-toggle ="modal"和data-target =#exampleModal"是打开窗口的关键] ...

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>

...以及用于模式窗口开始的html，带有关闭按钮[注意id ="exampleModal"指示要打开哪个窗口.数据关闭告诉关闭模态" ...

...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>
    ...

您可以在此处查看页面: https://www.amazingdg.com/_dev/temp/

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

注意:当我第二次单击打开按钮时，IE控制台中出现错误... Object.keys:参数不是Object.注意:第一次打开模式窗口时不会发生此错误.不确定如何解决...

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");
}

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

我尝试使用IE媒体查询更改淡入淡出过渡(IE不支持).这样可以消除褪色，但不能解决问题.

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

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;
    }
}

推荐答案

我在IE上也遇到了类似的问题，可以通过执行以下操作解决此问题:

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({});

这为我解决了IE中的问题(无需搞砸渐变类)，并且没有更改其他浏览器中的行为！

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!

这篇关于Internet Explorer中的“打开-关闭模式"问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！