自定义消息弹框以及跳转

Posted 2020-11-26 qinyios

<!-- 遮罩层 -->
<div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 ">

</div>
<!-- 弹窗 -->
<div id="showdiv" style="width: 36%; margin: 0 auto; height: 9.5rem; border: 1px solid #999; display: none; position: absolute; top: 35%; left: 35%; z-index: 3; background: #fff">
    <!-- 标题 -->
    <div style="background: #F8F7F7; width: 100%; height: 2rem; font-size: 0.65rem; line-height: 2rem; border: 1px solid #999; text-align: center;" >
        生成。。。。。,打印之前请确认是否。。。。
    </div>
    <!-- 内容 -->
    <div style="text-indent: 50px; height: 4rem; font-size: 0.5rem; padding: 0.5rem; line-height: 1rem; ">
        <div style="position: absolute; top:38%;left: 23%;">
            是否扫描
            <input  type="radio"  name="sm" value="1">是

            <input  type="radio"  checked ="checked"name="sm" value="0">否<br />
        </div>
    </div>
    <div style="text-align: center;">
    <!-- 按钮 -->
    <div style="display: inline-block;background: #418BCA; width: 19%; margin: 0 auto; height: 27px; line-height: 1.5rem; text-align: center;color: #fff;margin-top: 1rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: .59733rem;" onclick="closeWindow1()">
        取消
    </div>
    <div style="display: inline-block;background: #418BCA; width: 19%; margin: 0 auto; height: 27px; line-height: 1.5rem; text-align: center;color: #fff;margin-top: 1rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: .59733rem;" onclick="closeWindow2()">
        确定
    </div>
    </div>
</div>

　　-------------------------

<script type="text/javascript">
    // 弹窗
    function showWindow() {
        $(‘#showdiv‘).show();  //显示弹窗
        $(‘#cover‘).css(‘display‘,‘block‘); //显示遮罩层
        $(‘#cover‘).css(‘height‘,document.body.clientHeight+‘px‘); //设置遮罩层的高度为当前页面高度
    }
    // 关闭弹窗
    function closeWindow1() {
        $(‘#showdiv‘).hide();  //隐藏弹窗
        $(‘#cover‘).css(‘display‘,‘none‘);   //显示遮罩层

    }
    function closeWindow2() {
        $(‘#showdiv‘).hide();  //隐藏弹窗
        $(‘#cover‘).css(‘display‘,‘none‘);   //显示遮罩层
        var isscan= $("input[type=radio]:checked").val();
        var gvtable = $("input:checked").parent().next();
        var nums=‘‘;
        for(var i=0;i<gvtable.length;i++){
            console.log(gvtable[i].innerhtml);
            nums+=gvtable[i].innerHTML+",";
        }
        console.log(nums);
        if(nums === "" || nums == null || nums === undefined){ // "",null,undefined


            alerts("不能不勾选");

        }else{
            $.ajax({
                type: ‘POST‘,
                url: ‘addnum‘,
                async: false,
                dataType: ‘json‘,
                data: {boxnum: nums,iSscan:isscan},
                success: function (data1) {

                    window.location.href=‘dayin?stickingboxnum=‘ + data1.stickingboxnewnum + "&username=" + data1.name+"&isscan="+isscan;;


                }
            })
        }

    }
</script>
<script>
    function alerts(data, callback) { //回调函数
        var alert_bg = document.createElement(‘div‘);
        alert_box = document.createElement(‘div‘),
            alert_text = document.createElement(‘div‘),
            alert_btn = document.createElement(‘div‘),
            textNode = document.createTextNode(data ? data : ‘‘),
            btnText = document.createTextNode(‘确 定‘);

        // 控制样式
        css(alert_bg, {
            ‘position‘: ‘fixed‘,
            ‘top‘: ‘0‘,
            ‘left‘: ‘0‘,
            ‘right‘: ‘0‘,
            ‘bottom‘: ‘0‘,
            ‘background-color‘: ‘rgba(0, 0, 0, 0.1)‘,
            ‘z-index‘: ‘999999999‘
        });

        css(alert_box, {
            ‘width‘: ‘540px‘,
            ‘max-width‘: ‘90%‘,
            ‘font-size‘: ‘23px‘,
            ‘text-align‘: ‘center‘,
            ‘background-color‘: ‘#fff‘,
            ‘border-radius‘: ‘15px‘,
            ‘position‘: ‘absolute‘,
            ‘top‘: ‘50%‘,
            ‘left‘: ‘50%‘,
            ‘transform‘: ‘translate(-50%, -50%)‘
        });

        css(alert_text, {
            ‘padding‘: ‘10px 15px‘,
            ‘border-bottom‘: ‘1px solid #ddd‘
        });

        css(alert_btn, {
            ‘padding‘: ‘10px 0‘,
            ‘color‘: ‘#007aff‘,
            ‘font-weight‘: ‘600‘,
            ‘cursor‘: ‘pointer‘
        });

        // 内部结构套入
        alert_text.appendChild(textNode);
        alert_btn.appendChild(btnText);
        alert_box.appendChild(alert_text);
        alert_box.appendChild(alert_btn);
        alert_bg.appendChild(alert_box);

        // 整体显示到页面内
        document.getElementsByTagName(‘body‘)[0].appendChild(alert_bg);

        // 确定绑定点击事件删除标签
        alert_btn.onclick = function() {
            alert_bg.parentNode.removeChild(alert_bg);
            if (typeof callback === ‘function‘) {
                callback(); //回调
            }
        }
    }

    function css(targetObj, cssObj) {
        var str = targetObj.getAttribute("style") ? targetObj.getAttribute(‘style‘) : ‘‘;
        for (var i in cssObj) {
            str += i + ‘:‘ + cssObj[i] + ‘;‘;
        }
        targetObj.style.cssText = str;
    }


</script>