js实现一个弹出确认框点击效果代码-html代码-BFW代码库

js实现一个弹出确认框点击效果代码

代码语言：html

所属分类：弹出层

代码描述：js实现一个弹出确认框点击效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <style>
        .container {
            margin: 150px auto;
            max-width: 640px;
        }
    </style>
    <script>
        const $confirm = (text, buttonColor)=> {
            return new Promise((resolve)=> {
                var as_background = document.createElement('div'); var as_box = document.createElement('div'); var as_contentWrapper = document.createElement('div'); var as_textnode = document.createElement('div'); var as_okButton = document.createElement('button'); var as_cancelButton = document.createElement('button'); var as_buttonSection = document.createElement('div'); as_okButton.innerText = '确认'; as_cancelButton.innerText = '关闭'; as_textnode.innerText = text; as_box.classList.add("as-box"); as_background.classList.add("as-background"); as_okButton.classList.add("as-okButton"); as_okButton.setAttribute("id", "as-okButton"); as_cancelButton.classList.add("as-cancelButton"); as_textnode.classList.add("as-textnode"); as_buttonSection.classList.add("as-buttonSection"); as_contentWrapper.classList.add("as-contentWrapper"); as_box.style.backgroundColor = '#fff'; as_okButton.style.backgroundColor = buttonColor || '#5AB9EA'; as_okButton.style.color = '#fff'; as_textnode.style.color = '#666666'; as_box.appendChild(as_contentWrapper); as_contentWrapper.appendChild(as_textnode); as_contentWrapper.appendChild(as_buttonSection); as_buttonSection.appendChild(as_cancelButton); as_buttonSection.appendChild(as_okButton); as_background.appendChild(as_box); document.body.appendChild(as_background); var style = document.createElement('style'); style.setAttribute("type", "text/css"); style.setAttribute("id", "as_style_alertConfirm"); style.innerHTML = `.as-box{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                width: 300px;
                border: 0px solid;
                border-radius: 5px;
                padding: 20px;

                user-select: none;
                -ms-user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                -webkit-touch-callout: none;
                }

                .as-background{
                position: fixed;
                width: 100%;
                height: 100%;

                top: 0;
                left: 0;

                background-color: rgba(0, 0, 0, 0.425);
                font-family: 'Heebo', sans-serif;
                z-index: 100000;
                }

                .as-textnode{
                max-height: 500px;
                overflow-y: auto;
                font-size: 17px;
                word-wrap: break-word;
                line-height: 1.5;
                padding-right: 20px;
                }
                .as-textnode::-webkit-scrollbar{
                width: 5px;
                }
                .as-textnode::-webkit-scrollbar-thumb{
                background-color: #D5D8DC;
                border-radius: 10px;
                }

                .as-textnode{
                scrollbar-color: #D5D8DC;
                scrollbar-width: thin;
                }

                .as-okButton{
                border: 0px solid;
                border-radius: 3px;
                padding: 7px 9px;
                outline: none;
                font-size: 14px;.........完整代码请登录后点击上方下载按钮下载查看