自定义消息弹框以及跳转
<!-- 遮罩层 --> <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>