DOM基础测试37 #43

zhangxinxu · 2019-09-11T11:07:19Z

本期题目如下，关于元素。

大家提交回答的时候，注意缩进距离，起始位置从左边缘开始；另外，github自带代码高亮，所以请使用下面示意的格式（缩进和代码高亮1积分）。

```js
// 你的JS代码写在这里
 ```

**心怀瑞雪，自己作答，不要参考别人回答**

其他
因为本周六是中秋节，很多人会出去放松，因此本期小测答疑挪到下周和下周下册一起。直播地址：https://live.bilibili.com/21193211

每位答题者会有至少2积分参与分，本次小测满分10积分。

首位答题者将会获得100%被翻牌的技能。

GitHdu · 2019-09-11T11:54:45Z

1.
const dialog = document.createElement('dialog')
document.body.append(dialog)
2.
//dialog.open = 'aa'
3.
const btn = document.createElement('button')
btn.innerText='button'
dialog.appendChild(btn)

btn.addEventListener('click', ()=>{
  dialog.close()
})
4.
dialog.showModal()
5.
其他dialog使用show方法，最后一个使用showModal

XboxYan · 2019-09-11T12:13:49Z

1

var dialog = document.createElement('dialog');
document.body.append(dialog);

2

dialog.open = true;
// 或者
dialog.setAttribute('open','open');
// 或者
dialog.show();

3

var button = document.createElement('button');
button.textContent = 'close';
dialog.appendChild(button);
button.addEventListener('click',function(){
  this.parentNode.close();
})

4

dialog.showModal();

5
扩展一个showTop方法
demo

HTMLDialogElement.prototype.showTop = function(){
  if(window.topDialog) {
    window.topDialog.style.zIndex = 'auto';
  }
  window.topDialog = this;
  this.close(); // showModal必须先关闭再打开层级才生效
  this.style.zIndex = 99;
  this.showModal();
}

tao1874 · 2019-09-11T13:16:43Z

第1题

const diag = document.createElement('dialog')
document.body.appendChild(diag)

第2题

diag.open = 'xxxx'

第3题

const btn = document.createElement('button')
btn.innerText='关闭'
btn.addEventListener('click',function(){
    this.parentNode.open = false
    //发现正确的方式应该是调用close()，这样做遮罩会去不掉
})
diag.appendChild(btn)

第4题

diag.showModal()

第5题

通过 showModal() 调用的 dialog 元素总会出现再最上层，z-index 此时没有作用，但是通过show() 会有层级的问题

//找到所有 dialog 元素
const diags = document.querySelectorAll('dialog')
//找出z-index 最大值
const max = Math.max(...[...diags].map(e => e.style.zIndex))
//需要 show diag 元素 z-index 加 1
diag.style.zIndex = `${max + 1}`
diag.show()

ziven27 · 2019-09-11T13:20:45Z

第一题

var Dialog=document.createElement('dialog');
document.body.appendChild(Dialog);

第二题

Dialog.open='true';

第三题

var Button=document.createElement('button');
Button.innerText="关闭";
Button.type="button";
Dialog.append(Button);
Button.addEventListener('click',function(){
    Dialog.close();
});

第四题

Dialog.showModal();

第五题

dialog{
  z-index:99;
}
dialog:focus-within{
  z-index: 100;
}

livetune · 2019-09-11T13:49:53Z

const dialogElm = document.createElement('DIALOG')
document.body.appendChild(dialogElm)
dialogElm.appendChild(btnElm);

// 第二题
// dialogElm.setAttribute('open', '任意字符串')   

// 第三题
const btnElm = document.createElement('BUTTON')
btnElm.innerText = '关闭'
btnElm.addEventListener('click', e => {
  // dialogElm.removeAttribute('open')
  dialogElm.close()
})
第四题
// dialogElm.showModal() //自带遮罩

第五题
遍历所有dialog再把最大的zindex加1

function showDialog(dialog) {
  // 使用 showModal 时后出现的就在最高的层级
  // document.querySelectorAll('dialog')[index].showModal()
  dialog.show()
  const dialogList = [...document.querySelectorAll('dialog[open]')].map(elm => elm.style.zIndex || 0)
  if (!dialogList.length) {
    return
  }
  const maxZindex = Math.max.apply(null, dialogList)
  dialog.style.zIndex = maxZindex + 1
}

rayj1993 · 2019-09-11T15:13:08Z

第一题

let newDialog = document.createElement('dialog');
document.body.appendChild(newDialog);

第二题

newDialog.setAttribute('open', '开启');

第三题

let btn = document.createElement('button');
btn.innerText = '关闭dialog'
btn.addEventListener('click', function () {
    newDialog.removeAttribute('open');
});
newDialog.appendChild(btn);

第四题

newDialog.showModal();

第五题

function setMax() {
    let dialogs = document.querySelectorAll('dialog');
    let largestIndex = 1;
    Array.from(dialogs).forEach(dom => {
        if (Number(dom.style.zIndex) > largestIndex) {
            largestIndex = Number(dom.style.zIndex)
        };
    });
    dialogs[dialogs.length - 1].style.zIndex = largestIndex + 1

}
setMax();

Seasonley · 2019-09-11T15:44:40Z

//1
var dialog=document.createElement('dialog')
document.body.appendChild(dialog)
//2
dialog.open='open'
//3
var button=document.createElement('button')
button.innerText='x'
button.addEventListener('click',()=>dialog.close())
dialog.appendChild(button)
//4
dialog.close()
dialog.showModal()
//5
nodelist=Array.from(document.querySelectorAll("dialog"))
var maxIndex=Math.max(...nodelist.map(v=>getComputedStyle(v).zIndex).filter(v=>v!=='auto'))
dialog.style.zIndex=maxIndex+1

wingmeng · 2019-09-11T15:50:16Z

第 1 题：

const dialog = document.createElement('dialog');
document.body.appendChild(dialog);

第 2 题：

// 方法1：
dialog.open = true;  // 或其他为“真值”的基本类型，如 1，"abc" 等

// 方法2：
dialog.show();

// 方法3：
dialog.showModal();

第 3 题：

const btn = document.createElement('button');

btn.innerText = 'close';
btn.addEventListener('click', () => {
  // 方法1：
  dialog.open = false;  // 或其他“非真”的基本类型，如 0、null 等

  // 方法2：
  dialog.close();
});
dialog.appendChild(btn);

第 4 题：

// 用 showModal 方法即可让打开的 dialog 自带遮罩，在 CSS 里可通过 ::backdrop 设置遮罩层样式
dialog.showModal();

第 5 题：

思路：如果是 showModal() 方法打开的 dialog，则其覆盖层级默认是置顶的；而通过 show() 方法或 open 属性打开的 dialog，其覆盖层级遵循“后来居上”原则，所以需要手动调整其 z-index 值来使其覆盖层级置顶。

(function(dialogElm) {
  if (!dialogElm) return;

  const proto = dialogElm.prototype;
  const oldShow = proto.show;
  const dialogBaseLevel = 100;  // 对话框弹层的基准层级（根据项目zIndex规范合理设置）
  const getMaxZIndex = () => {
    const dialogs = document.querySelectorAll('dialog[open]');
    const maxZIndex = Math.max.apply(null, [...dialogs].map(it =>
      it.style.zIndex || Number(window.getComputedStyle(it).zIndex) || dialogBaseLevel
    ));

    return maxZIndex;
  };
  const setMaxZIndex = el => el.style.zIndex = getMaxZIndex() + 1;

  // 重写 show 方法
  proto.show = function() {
    setMaxZIndex(this);
    oldShow.call(this);
  };

  // "劫持" open 属性
  Object.defineProperty(proto, 'open', {
    set: function(value) {
      const isOpen = Boolean(isNaN(value) ? value : Number(value));
      this[isOpen ? 'show' : 'close']();
    }
  });
})(window.HTMLDialogElement);

测试 Demo

fzpijl · 2019-09-11T16:02:27Z

var dialog = document.createElement('dialog')
document.body.appendChild(dialog)

dialog.setAttribute('open', '')

var button = document.createElement('button')
dialog.appendChild(button)
button.onclick = function(){
    this.parentNode.close()
}

dialog.showModal()

guqianfeng · 2019-09-12T01:59:32Z

    let oDialog = document.createElement("dialog");

    document.body.appendChild(oDialog);

    // oDialog.open = true;

    let oBtn = document.createElement("button");
    oBtn.innerText = "关闭";
    oBtn.addEventListener("click", function(){
        oDialog.close();
    });
    oDialog.appendChild(oBtn);

    // oDialog.show(); //这个不带遮罩
    oDialog.showModal(); //这个带遮罩

    function setMaxZIndex(){
        let aDialog = document.querySelectorAll("dialog");
        let maxZIndex = 0;
        //实现思路，我是想先拿到最大的那个zIndex，然后在把最后个赋值个最大值+1
        [...aDialog].forEach(item => {
            let zIndex = getComputedStyle(item).zIndex;
            if(zIndex > maxZIndex){
                maxZIndex = zIndex;
            }
        });
        aDialog[aDialog.length-1].style.zIndex = maxZIndex + 1;
    }
    setMaxZIndex();

asyncguo · 2019-09-12T04:02:24Z

let _dialog = document.createElement('dialog')
document.body.appendChild(_dialog)

_dialog.setAttribute('open', 'open')

let _button = document.createElement('button')
_button.innerHTML = 'cancel'
_dialog.appendChild(_button)

_button.addEventListener('click', () => {
  _dialog.close()
})

_dialog.showModal()

// 只要最后一个dialog使用showModal显示时，z-index会失效，即其zIndex层级为最大显示。
lastDialog.showModal()

Despair-lj · 2019-09-12T06:04:15Z

// 1
var dialog = document.createElement('dialog');
document.body.appendChild(dialog);

// 2
dialog.setAttribute('open', 'true');

// 3
var button = document.createElement('button');
button.textContent = 'close';
dialog.appendChild(button);
button.addEventListener('click', function() {
  dialog.close();
});

// 4
dialog.showModal();

// 5
var initZIndex = 19;
document.querySelectorAll('dialog').forEach(function(el) {
  // 设置层级为最高, 遍历已经为显示状态的 dialog 元素, 获取其最大的 z-index 值
  el._setMaxZIndex = function() {
    var allDialog = Array.from(document.querySelectorAll('dialog[open]'));
    var maxIndex = allDialog.length
      ? Math.max.apply(
          null,
          allDialog.map(function(dialog) {
            var zIndex = window.getComputedStyle(dialog).zIndex;
            return zIndex === 'auto' ? initZIndex : zIndex;
          })
        )
      : initZIndex;
    this.style.zIndex = maxIndex + 1;
  };
  var observer = new MutationObserver(function(mutationList) {
    mutationList.forEach(function(mutation) {
      var target = mutation.target;
      if (!target || !target._setMaxZIndex) {
        return;
      }

      switch (mutation.type) {
        case 'attributes':
          // 当 dialog 的 open 属性为 true 时对其设置 z-index
          if (target.open) {
            el._setMaxZIndex();
          }
          break;
        default:
          break;
      }
    });
  });

  observer.observe(el, {
    attributes: true,
    attributeFilter: ['open']
  });
});

JaimeCheng · 2019-09-12T06:44:03Z

// 1
const dialog = document.createElement('dialog')
document.body.append(dialog)

// 2
dialog.open = 'open'

// 3
const btn = document.createElement('button')
btn.innerText = 'Close'
dialog.append(btn)
btn.onclick = function () {
  dialog.close()
}

// 4
dialog.showModal()

// 5 没有头绪

lifelikejuly · 2019-09-12T08:01:29Z

第一题

 let dialog = document.createElement("dialog");
 document.body.appendChild(dialog);

第二题

dialog.open = "test";

第三题

let button = document.createElement("button");
button.innerText = "close";
button.onclick = () => {
    dialog.close();
};
dialog.appendChild(button);

第四题

 //增加遮盖前删除open属性
 dialog.removeAttribute('open');
 dialog.showModal();

第五题

//之前的dialog使用show
beforeDialog.show();
//最后一个dialog使用showModal,级别高
lastDialog.showModal();

liyongleihf2006 · 2019-09-13T04:10:42Z

第一题

var dialog = document.createElement('dialog');
document.body.append(dialog);

第二题

dialog.open = true;

第三题

var btn = document.createElement('button')
btn.innerText='关闭'
btn.addEventListener('click', ()=>{
    this.closest('dialog').close()
})
dialog.appendChild(btn)

第四题

dialog.showModal();

第五题

var observer = new MutationObserver(function (mutationsList) {
    mutationsList.forEach(function (mutation) {
        var target = mutation.target;
        if(target instanceof HTMLDialogElement&&target.open){
            var dialogs = [...document.querySelectorAll('dialog[open]')].filter(dialog=>dialog!==target);
            var maxZIndex = Math.max.apply(null, [...dialogs].map(item =>+item.zIndex || 0));
            if(isNaN(target.zIndex)||target.zIndex<=maxZIndex){
                target.zIndex = maxZIndex + 1;
            }
        }
        
    });
});
observer.observe(document, {
    attributes: true,
    subtree: true,
    attributeFilter: ['open']    
});

silverWolf818 · 2019-09-13T05:43:53Z

//第一题
var dialog = document.createElement('dialog');
document.body.appendChild(dialog);
//第二题
dialog.setAttribute('open','dialog');
//第三题
var btn = document.createElement('button');
btn.textContent = "btn";
dialog.appendChild(btn);
btn.addEventListener('click',function () {
    dialog.close();
},false);
//第四题 如果使用了showModal就不能有open属性
dialog.showModal();

//第五题

通过测试和查看文档规范，最后一个打开的dialog一定会上面，是否有必要手动设置z-index。
测试地址

HTMLDialogElement

hangfengnice · 2019-09-13T10:23:20Z

1.
let dialog = document.createElement('dialog')
    document.body.appendChild(dialog)

2.
dialog.setAttribute('open', true)

3.
let button = document.createElement('button')
button.innerText = "close dialog"
button.onclick = function() {
    dialog.removeAttribute('open')
 }
dialog.appendChild(button)

4.
dialog.showModal()

5 . 不清楚

sghweb · 2019-09-13T14:24:21Z

// 第一题
let dialog = document.createElement("dialog")
document.body.appendChild(dialog)
// 第二题
dialog.setAttribute("open","open")
// 第三题
let btn = document.createElement("button")
dialog.appendChild(btn)
btn.addEventListener("click",function(){
 dialog.close()
})
// 第四题
dialog.showModal()
// 第五题
获取所有显示的dialog的z-index值，最后出现的dialog设为前面所有z-index值之和

NeilChen4698 · 2019-09-13T16:55:31Z

var dialogEle = document.createElement('dialog');
document.body.appendChild(dialogEle);

dialogEle.setAttribute('open', 'open');

var closeBtn = document.createElement('button');
closeBtn.textContent  = '关闭';
closeBtn.addEventListener('click', function() {
	dialogEle.removeAttribute('open');
});
dialogEle.appendChild(closeBtn);

dialogEle.style.cssText = 'box-shadow: 0 0 0 100vmax rgb(0,0,0,0.3); z-index: 2;';

var createDialogElement = function() {
	var dialogEle = document.createElement('dialog');
	dialogEle.setAttribute('open', 'open');
	var closeBtn = document.createElement('button');
	closeBtn.textContent  = '关闭';
	closeBtn.addEventListener('click', function() {
		dialogEle.removeAttribute('open');
	});
	dialogEle.style.cssText = 'box-shadow: 0 0 0 100vmax rgb(0,0,0,0.3); z-index: 2;';
	document.querySelectorAll('dialog').forEach(function(e) {
		e.style.zIndex = '1';
	});
	dialogEle.appendChild(closeBtn);
	return dialogEle;
}
document.body.appendChild(createDialogElement());
document.body.appendChild(createDialogElement());
document.body.appendChild(createDialogElement());
document.body.appendChild(createDialogElement());
document.body.appendChild(createDialogElement());

ghost · 2019-09-14T00:45:13Z

1

let dialog = document.createElement('dialog')
document.body.insertAdjacentElement('beforeend', dialog)

2

dialog.open = 'abc'

3

let button = document.createElement('button')
dialog.insertAdjacentElement('beforeend', button)
button.addEventListener('click', (event) => {
    dialog.close()
})

4

dialog.close()
dialog.showModal()

5

`最后使用 showModal 方法的元素会自动显示在最上层`

zy017 · 2019-09-14T05:03:22Z

// 1.
var dialog = document.createElement('dialog')
document.body.appendChild(dialog)
// 2.
dialog.open = true
// 3.
 var button = document.createElement('button')
button.innerText = '关闭'
dialog.appendChild(button)
button.addEventListener('click', (e) => {
    var self = e.target
    var parentDialog = self.closest('dialog')
    if (parentDialog) {
        parentDialog.close()
    }    
})
// 4.
dialog.showModal()
// 5.
var showDialog = function (dialogDom) {
    // 遍历所有dialog找到z-index最大值，加1
    var dialogList = document.querySelectorAll('dialog')
    var MaxZIndex = 99
    if (dialogList.length > 0) {
        dialogList.forEach(item => {
            var zIndex = window.getComputedStyle(item)['z-index']
            if (zIndex === 'auto') {
                item.style.zIndex = 99
            } else {
                MaxZIndex = MaxZIndex >= zIndex ? MaxZIndex : zIndex
            }
        })
    }
    dialogDom.style.zIndex = Number(MaxZIndex) + 1
    dialogDom.showModal()
}

juzhiqiang · 2019-09-14T09:52:20Z

1.
var dalog = document.createElement('dialog');
 document.body.appendChild(dalog);

2.
dalog. setAttribute('open','test')

3.
var button = document.createElement('button')
button.innerText = 'x'
dialog.appendChild(button);
button.addEventListener('click', (e) => {
   dialog.close()
})

4.
dialog.showModal(); 
 
5.
var max = 0;
var dialogArr = [];
var dalogGrou = document.getElementsByTagName('dialog');
dalogGrou.forEach(item => {
        var index = window.getComputedStyle(item)['z-index'];
        dialogArr.push(zIndex === 'auto' ? 0: index);
 })
max = Number(Math.max.apply(this,dalogGrou)) +  1;
var dalog = document.createElement('dialog');
dalog.style.zIndex = max;
 document.body.appendChild(dalog);

frankyeyq · 2019-09-14T13:55:40Z

let dialogElement = document.createElement('dialog');
document.body.append(dialogElement);

dialogElement.open = true;

let buttonElement = document.createElement('button');
buttonElement.onclick = function () {
    dialogElement.open = false;
}
dialogElement.append(buttonElement);

dialogElement.showModal();

let dialogs = document.querySelectorAll('dialog');
let maxZindex = 0;
dialogs.forEach(dialog => {
    let zIndex = getComputedStyle(dialog).zIndex;
    if (zIndex > maxZindex) {
        maxZindex = zIndex;
    }
});
dialogElement.style.zIndex = maxZindex + 1;

les-lee · 2019-09-15T16:21:56Z

    // 5
    var shouModal = HTMLDialogElement.prototype.showModal;
    HTMLDialogElement.prototype.showModal = (function () {
      var initZIndex = 1;
      return function () {
        console.log(initZIndex)
        this.style.zIndex = ++initZIndex
        shouModal.call(this)
      }
    })();
    // 1
    var dialog = document.createElement('dialog');
    document.body.append(dialog)
    // 2
    dialog.open = 'gg'
    // 3
    var button = document.createElement('button')
    button.textContent = 'close this dialog'
    dialog.append(button)
    button.onclick = function (e) {
      dialog.close()
    }

    // 4
    // 不重置open在 chrome 会报错
    dialog.open = null
    dialog.showModal()
     // test multiple dialog case
    var dialogNum = 0
    function createDialog() {
      dialogNum++
      var dialog = document.createElement('dialog');
      document.body.append(dialog)
      var button = document.createElement('button')
      button.textContent = 'close this dialog' + dialogNum
      dialog.append(button)
      dialog.showModal()
    }

xxf1996 · 2019-09-17T02:13:12Z

// 1
let dialog = document.createElement('dialog')
document.body.appendChild(dialog)
// 2
dialog.setAttribute('open', '打开dialog')
// 3
let button = document.createElement('button')
button.addEventListener('click', () => {
  dialog.close()
})
dialog.appendChild(button)
// 4
dialog.showModal()
// 5：通过MutationObserver监听dialog的插入，动态设置为最大z-index

可以通过::backdrop来设置遮罩的样式：

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

zengqingxiao · 2019-09-17T13:22:39Z

HTML

  <button class="show" onclick="dialogShow()">点击显示</button>
  <button class="hidden" onclick="dialogHid()">点击隐藏</button>

CSS

    dialog {
      border: 1px black solid;
      padding: 50px 100px;
    }

    dialog::backdrop {
      background-color: rgba(48, 48, 48, .8);
      border: 0px;
    }

JS

    //点击显示
    function dialogShow() {
      let dialogDom = document.querySelector('dialog');
      dialogDom.showModal()
    }
    // 点击隐藏
    function dialogHid() {
      let dialogDom = document.querySelector('dialog');
      dialogDom.close()
    }

第一问

    // 创建元素
    let dialog = document.createElement('dialog');
    // body元素
    let body = document.querySelector('body');
    // 插入
    body.appendChild(dialog);

第二问

    let dialogDom = document.querySelector('dialog');
    dialogDom.setAttribute('open', 'true')

第三问

    let button = document.querySelector('button.hidden');
    dialogDom.appendChild(button);

第四问

  dialogShow()

第五问
1.首先遍历相加zindex肯定是不可以的，因为z-index还要看父亲的z-index的高度大小，
2.由于这个不好测试，那么我想到就是每一个dialog都是用showModal()方法打开的那么最后一个也有可能是最上面的哪一个

whrice · 2019-09-18T12:54:49Z

1

 var dialog=document.createElement('dialog');
 document.body.append(dialog);

2

dialog.open=true;

3

var btn=document.createElement('button');
btn.textContent="close";
dialog.appendChild(btn);
btn.addEventListener('click',function(){
         this.parentNode.close();
    })

4

if(dialog.open){
dialog.open=false;
}
dialog.showModal()

5

想法是showModal的层级是最高的，把最后出现的dialog设置为showModal，那么如何找出最后出现的dialog

GCGligoudan · 2019-09-18T14:06:24Z

    // 1.
    var dialog = document.createElement('dialog');
    document.body.appendChild(dialog);
    // 或者使用insertBefore
    // document.body.insertBefore(dialog, document.body.firstElementChild);

    // 2.
    dialog.setAttribute('open', 'abcdefg');

    // 3.
    var button = document.createElement('button');
    button.innerText = '关闭';
    button.addEventListener('click', function(){
      dialog.close();
    }, false);
    dialog.appendChild(button);

    // 4.
    // ::backdrop CSS伪元素可以用于更改dialog的背景元素样式，实现遮罩层效果
    // 不过此时要使用showModal()这个api打开dialog

    // 5
    var dialogzIndex = 1;
    // 每打开一个dialog 让dialogzIndex加一
    openBtn.addEventListener('click', function(){
      dialog.showModal();
      dialog.style.zIndex = dialogzIndex;
      dialogzIndex ++;
    }, false);
    // 每关闭一个dialog，让dialogzIndex减一
    closeBtn.addEventListener('click', function(){
      dialog.close();
      dialogzIndex --;
    }, false);

kuikuiGe · 2019-09-20T09:24:49Z

//1.

var dialogDom = document.createElement("dialog");
document.body.appendChild(dialogDom);

//2.

dialogDom.setAttribute('open','')

//3.

var buttonDom = document.createElement('button');
buttonDom.textContent = '关闭';
buttonDom.addEventListener('click',function(){
    dialogDom.close()
});
dialogDom.appendChild(buttonDom);

//4.

dialogDom.showModal()

::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

//5.

dialogDom.showModal()

Zerwhou · 2019-09-20T14:13:48Z

//第一题：

var dia = document.getElement('dialog');
document.body.appendchild(dia);

//第二题：
document.getElement('dialog').open = true;

//第三题：

var button = document.getElement('button');
dialog.append(button);

//第四题：
dialog.showModal();

//第五题：
没有思路

EmmaYXY · 2019-09-21T01:36:31Z

来蹭个分……其他一无所知……

var dialog = document.createElement('dialog')
document.body.appendChild(dialog)

zhangxinxu · 2019-09-21T02:43:06Z

DOM37要点：

createElement的时候，里面的标签名称是不区分大小写的。appendChild这里也可以使用append这个API，新API，IE不支持，如果是HTML字符串，会自动转义为安全的纯本文。
如果直接.open，则根据值是否 == true/false判断是否弹框显示；如果是setAttribute方法，则任意字符串和值。
<dialog>关闭使用.close()方法。
dialog.showModal()自带本透明蒙层。如果我们想要修改透明度，可以使用::backdrop伪元素进行设置。
showModal 时后弹框层级就是最高，其他元素设置再高的z-index值都无效。但是show()显示的就不一样了，我们需要动态计算处理，原理：遍历所有dialog再把最大的zindex加1。ziven27 的:focus-within值得关注下。

JaimeCheng mentioned this issue Sep 12, 2019

DOM基础测试37 - Dialog元素 JaimeCheng/zxx-quiz-summary#11

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DOM基础测试37 #43

DOM基础测试37 #43

zhangxinxu commented Sep 11, 2019

GitHdu commented Sep 11, 2019

XboxYan commented Sep 11, 2019 •

edited

Loading

tao1874 commented Sep 11, 2019 •

edited

Loading

ziven27 commented Sep 11, 2019 •

edited

Loading

livetune commented Sep 11, 2019

rayj1993 commented Sep 11, 2019 •

edited

Loading

Seasonley commented Sep 11, 2019 •

edited

Loading

wingmeng commented Sep 11, 2019 •

edited

Loading

fzpijl commented Sep 11, 2019

guqianfeng commented Sep 12, 2019

asyncguo commented Sep 12, 2019

Despair-lj commented Sep 12, 2019

JaimeCheng commented Sep 12, 2019

lifelikejuly commented Sep 12, 2019

liyongleihf2006 commented Sep 13, 2019

silverWolf818 commented Sep 13, 2019

hangfengnice commented Sep 13, 2019

sghweb commented Sep 13, 2019

NeilChen4698 commented Sep 13, 2019

ghost commented Sep 14, 2019

zy017 commented Sep 14, 2019

juzhiqiang commented Sep 14, 2019

frankyeyq commented Sep 14, 2019

les-lee commented Sep 15, 2019

xxf1996 commented Sep 17, 2019

zengqingxiao commented Sep 17, 2019

whrice commented Sep 18, 2019

GCGligoudan commented Sep 18, 2019

kuikuiGe commented Sep 20, 2019

Zerwhou commented Sep 20, 2019

EmmaYXY commented Sep 21, 2019

zhangxinxu commented Sep 21, 2019

DOM基础测试37 #43

DOM基础测试37 #43

Comments

zhangxinxu commented Sep 11, 2019

GitHdu commented Sep 11, 2019

XboxYan commented Sep 11, 2019 • edited Loading

tao1874 commented Sep 11, 2019 • edited Loading

ziven27 commented Sep 11, 2019 • edited Loading

第一题

第二题

第三题

第四题

第五题

livetune commented Sep 11, 2019

rayj1993 commented Sep 11, 2019 • edited Loading

Seasonley commented Sep 11, 2019 • edited Loading

wingmeng commented Sep 11, 2019 • edited Loading

第 1 题：

第 2 题：

第 3 题：

第 4 题：

第 5 题：

fzpijl commented Sep 11, 2019

guqianfeng commented Sep 12, 2019

asyncguo commented Sep 12, 2019

Despair-lj commented Sep 12, 2019

JaimeCheng commented Sep 12, 2019

lifelikejuly commented Sep 12, 2019

liyongleihf2006 commented Sep 13, 2019

silverWolf818 commented Sep 13, 2019

hangfengnice commented Sep 13, 2019

sghweb commented Sep 13, 2019

NeilChen4698 commented Sep 13, 2019

ghost commented Sep 14, 2019

zy017 commented Sep 14, 2019

juzhiqiang commented Sep 14, 2019

frankyeyq commented Sep 14, 2019

les-lee commented Sep 15, 2019

xxf1996 commented Sep 17, 2019

zengqingxiao commented Sep 17, 2019

whrice commented Sep 18, 2019

GCGligoudan commented Sep 18, 2019

kuikuiGe commented Sep 20, 2019

Zerwhou commented Sep 20, 2019

EmmaYXY commented Sep 21, 2019

zhangxinxu commented Sep 21, 2019

XboxYan commented Sep 11, 2019 •

edited

Loading

tao1874 commented Sep 11, 2019 •

edited

Loading

ziven27 commented Sep 11, 2019 •

edited

Loading

rayj1993 commented Sep 11, 2019 •

edited

Loading

Seasonley commented Sep 11, 2019 •

edited

Loading

wingmeng commented Sep 11, 2019 •

edited

Loading