在页面中心出现一个模式，使它有时会阻止任何用户活动

Question

我使用javascript创建了一个模式框，如下所示。一切正常。我想做的是，使此模式显示为一个对话框。例如，the modal as available in the bootstrap。

let modal = document.createElement("div");
modal.style.paddingRight = "15px";
modal.style.display = "block";
modal.style.overflowX = "hidden";
modal.style.overflowY = "auto";
modal.style.zIndex = "1072";
modal.style.position = "fixed";
modal.style.top = 0;
modal.style.left = 0;
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.outline = 0


let modalDialog = document.createElement("div");
modalDialog.style.maxWidth = "500px";
modalDialog.style.margin = "1.75rem auto";
modalDialog.style.position = "relative";
modalDialog.style.width = "auto";
modalDialog.style.transition = "transform .3s ease-out,-webkit-transform .3s ease-out";
modalDialog.style.pointerEvents = "none";
modal.append(modalDialog);

let modalContent = document.createElement("div");
modalContent.style.position = "relative";
modalContent.style.display = "flex";
modalContent.style.flexDirection = "column";
modalContent.style.width = "100%";
modalContent.style.pointerEvents = "auto";
modalContent.style.backgroundColor = "#fff";
modalContent.style.backgroundClip = "padding-box";
modalContent.style.border = "1px solid rgba(0,0,0,.2)";
modalContent.style.borderRadius = ".3rem";
modalContent.style.outline = 0;
modalDialog.append(modalContent);

let modalHeader = document.createElement("div");
modalHeader.style.display = "flex";
modalHeader.style.alignItems = "flex-Start";
modalHeader.style.justifyContent = "space-between";
modalHeader.style.padding = "1rem 1rem";
modalHeader.style.borderBottom = "1px solid #dee2e6";
modalHeader.style.borderTopLeftRadius = "calc(.3rem - 1px)";
modalHeader.style.borderTopRightRadius = "calc(.3rem - 1px)";
modalHeader.innerText = "Header"
modalContent.append(modalHeader);


let modalBody = document.createElement("div");
modalBody.style.position = "relative";
modalBody.style.flex = "1 1 auto";
modalBody.style.padding = "1rem";
modalBody.innerText = "Body";
modalContent.append(modalBody);


let modalFooter = document.createElement("div");
modalFooter.style.display = "flex";
modalFooter.style.flexWrap = "flex-wrap";
modalFooter.style.alignItems = "center";
modalFooter.style.justifyContent = "flex-end";
modalFooter.style.padding = "0.75rem";
modalFooter.style.borderTop = "1px solid #dee2e6";
modalFooter.style.borderBottomRightRadius = "calc(.3rem - 1px)";
modalFooter.style.borderBottomLeftRadius = "calc(.3rem - 1px)";
modalFooter.innerText = "Footer"
modalContent.append(modalFooter);

document.body.append(modal)

我希望此模式出现在一个小的等待间隔中。我如何使这种模式出现，以便锁定整个屏幕？

Answer 1

您需要time-interval之类的setTimeout来隐藏您的模态。（将模态html放在#mydiv内）

使用pointer-events: none您可以锁定屏幕。

setTimeout(function() {
    $('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds(you can increase or decrease )

#mydiv{
    width: 500px;
    height: 500px;
    background: #000;
    color: #fff;
    text-align: center;
    pointer-events: none;<!-- This locks the entire screen -->
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">myDiv</div>

您可以将#mydiv设为全屏透明，以使其起作用作为背景包装