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

问题描述

我有一个带有关闭按钮的模式窗口(使用引导程序).在大多数浏览器中，模态窗口可以正常打开和关闭.但是，在 Internet Explorer 中，存在一个问题.我们可以很好地打开模态窗口，然后很好地关闭它……但是如果我们再次尝试打开它，它就不会了.

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

 <a href="javascript:void(0)" id="navdemo" data-toggle="modal" data-target="#exampleModal">获取演示</a>

...和模式窗口开始的 html，带有关闭按钮 [注意 id="exampleModal" 告诉打开哪个窗口.并且 data-dismiss 告诉关闭模态"...

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

注意:当我第二次单击打开按钮时，IE 控制台出现错误... Object.keys: argument is not an Object.注意:第一次打开模态窗口时不会出现此错误.不知道怎么解决...

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

我试图删除淡入淡出类...使模态窗口显示表单中的所有隐藏元素(必填字段、成功发送的消息等)

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

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

我尝试使用 IE 媒体查询更改淡入淡出过渡(IE 不支持).这消除了淡入淡出，但没有解决问题.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {/* IE10+ CSS 样式放在这里 */.褪色 {过渡:无！重要；}}

解决方案

我在IE上遇到过类似的问题，通过以下方法解决了:

每当您打开模式时，使用:

modal.element.modal();

发送一个空对象，像这样:

modal.element.modal({});

这解决了我在 IE 中的问题(无需弄乱淡入淡出类)，并且没有改变其他浏览器中的行为！

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

解决方案

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!

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