Question

在我的页面中，我通过使用CSS设置的html5标记<dialog>实现了模态对话框。这是我创建对话框的代码：

function dialog(msj, tit, element){
    if (!tit) { var tit = "Mensaje" };
    if (!element) { var element = document.querySelector("section"); };
    var dlg = document.createElement("dialog");
    dlg.className = "msj";
    var h2 = document.createElement("h2");
    h2.innerHTML = tit;
    var p = document.createElement("p");
    p.innerHTML = msj;
    var ac = document.createElement("button");
    ac.innerHTML = "Aceptar";
    ac.className = "btn btn-form2";
    ac.onclick = function(){ dlg.close(); element.removeChild(dlg); sigDiag(); } //The button closes and removes the dialog from the element and show the next dialog (if exists)
    dlg.appendChild(h2);
    dlg.appendChild(p);
    dlg.appendChild(ac);
    dlg.oncancel = function() { element.removeChild(dlg); sigDiag(); } //same action that onclose but its fired when ESC key is pressed
    element.appendChild(dlg);
    if (document.querySelectorAll("dialog").length == 1) { //Shows the dialog if there are no more dialogs in the page
        dlg.showModal();
    }
}

function sigDiag() {
    var dlg = document.querySelector("dialog");
    if (dlg) { dlg.showModal(); }
}

页面的所有内容都包含在<section>标记中。页面的其余部分（菜单项，徽标等）分别包含在<header>，<nav>和<footer>标记中。触发对话框功能的按钮位于div中，其溢出：auto，固定高度。

当对话框关闭时（使用按钮或ESC键），div不会滚动鼠标滚轮，但箭头键会正常滚动。

有没有在Chrome中修复此问题？版本47.0.2526.106（Build oficial）m（32位）

PD：这是我在StackOverflow中的第一个问题，抱歉我的英语不好。它不是我的母语，我接受建议......

更新

代码在jsfiddle中：https://jsfiddle.net/eajwvLow/

完整窗口中的结果（最重要的）：https://fiddle.jshell.net/eajwvLow/show/

＆＃34; iFrame的＆＃34;导致jsfiddle的代码窗口没有反映按钮的实际行为（我的情况）。

对话框html5在关闭时产生滚动问题

0 个答案: