zoukankan      html  css  js  c++  java
  • 自定义消息弹框以及跳转

    <!-- 遮罩层 -->
    <div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px;  100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 ">
    
    </div>
    <!-- 弹窗 -->
    <div id="showdiv" style=" 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;  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;  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;  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>
    

      

  • 相关阅读:
    LowercaseRoutesMVC ASP.NET MVC routes to lowercase URLs
    Asp.net MVC Combres的简单用法
    原码, 反码, 补码 详解
    四种数据存储结构---顺序存储 链接存储 索引存储 散列存储
    快速排序时间复杂度为O(n×log(n))的证明
    进程与线程及其区别
    linux c语言定时器
    平衡二叉查找树的一些知识总结
    C++编程练习(17)----“二叉树非递归遍历的实现“
    C++编程练习(16)----“排序算法 之 快速排序“
  • 原文地址:https://www.cnblogs.com/qinyios/p/12113443.html
Copyright © 2011-2022 走看看