启用模式叠加时，将焦点集中到弹出输入

Question

I have this peculiar situation. First, there's a modal and the rest of the page is hidden by overlay:

<div class="overlay"></div>
.overlay {
 position: fixed;
 width: 100%;
 height: 100%;
 visibility: hidden; //visible when modal pops up of course
 top: 0;
 left: 0;
 z-index: 2900;
}

Inside modal there are some elements which have the following event listener:

el.find('select').on('mousedown', function (e){
    if (event.which === 3) {
    ...popup window containing contenteditable div gets formed and added to modal, it gets el boundingClientRect data to sit tight on it. So far so good, but - 
    popup.focus();

does not work. Tried js+jquery and placing popup anywhere on page, but nada. Its not the console question either. Triggering a click on popup has zero results. When I remove overlay all works. Can't figure out the reason...

To reiterate the layers - there's the rest of the page covered by overlay, on that sits a modal (z-index:3000) and popup is called onto it(z-index:3010).

Edit: now here's the fiddle - https://jsfiddle.net/zumbauuo/

Problem persists. Yesterday in original document I was able to get popup focused with this code when removing overlay div and keeping modal structure, today however - not. So I don't know what to think any more.

Answer 1

请试试：

.on( "change", handler )