自定义消息弹框以及跳转

Posted qinyios

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义消息弹框以及跳转相关的知识,希望对你有一定的参考价值。

<!-- 遮罩层 -->
<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>

  

以上是关于自定义消息弹框以及跳转的主要内容,如果未能解决你的问题,请参考以下文章

自定义alert弹框,去掉IP以及端口号提示

SpringCloud系列十一:SpringCloudStream(SpringCloudStream 简介创建消息生产者创建消息消费者自定义消息通道分组与持久化设置 RoutingKey)(代码片段

简单的自定义弹框

单例模式:自定义弹框

单例模式:自定义弹框

单例模式:自定义弹框