js 原生弹框post接口提示

js 原生弹框&post接口&提示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>邮件模板</title><style type="text/css">* {margin: 0px;padding: 0px;}#mask {background-color: black;opacity: 0.3;position: absolute;top: 0px;left: 0px;z-index: 10;}#tankuang {width: 400px;height: 300px;background-color: #fff;position: absolute;z-index: 888;left: 200px;top: 250px;border-radius: 2px;}#tips {width: 400px;height: 30px;background-color: #fff;position: absolute;z-index: 9999;left: 200px;top: 20px;border-radius: 2px;text-align: center;line-height: 30px;}#close {width: 15px;height: 15px;position: absolute;top: 12px;right: 5px;z-index: 999;text-align: center;line-height: 15px;}#close:hover {cursor: pointer;}.ctnBox {padding-top: 20px;padding-left: 10px;}.ctnBox p {font-size: 16px;text-indent: 30px;margin: 0 0 15px 0;}.ctnBox div {margin-bottom: 15px;text-indent: 30px;}.ctnBox div a {color: #3366ff;cursor: pointer;}.ctnBox button {background-color: #3366ff;color: #fff;border: 1px solid #3366ff;padding: 5px 15px;margin-right: 20px;border-radius: 2px;outline: none;cursor: pointer;}#dialogCtn {position: absolute;top: 40px;left: 50%;transform: translateX(-50%);display: none;}#dialogCtn span {background-color: rgba(0, 0, 0, .7);color: #fff;font-size: 14px;padding: 15px;border-radius: 5px;}.title {height: 40px;border-bottom: 1px solid #E8E8E8;line-height: 40px;padding-left: 10px;font-weight: bold;}.content .list {padding-left: 10px;padding-top: 20px;}.content .list .left {width: 180px;display: inline-block;text-align: right;}.content .list .right {width: 100px;display: inline-block;}.content .list .right select,textarea,input {display: inline-block;width: 100%;}.foot {position: absolute;bottom: 10px;left: 0;right: 0;text-align: center;}.foot span {display: inline-block;width: 50px;text-align: center;height: 32px;line-height: 32px;padding-left: 20px;padding-right: 20px;margin-right: 10px;background-color: #36f;margin-left: 30px;border-radius: 2px;color: #fff;font-size: 15px;cursor: pointer;}</style></head><body><div id="tankuang" style="display: none;"><p class="title">结算单处理</p><div class="content"><div class="list"><span class="left"><a style="color:red">*</a> 是否同意结算单结果：</span><span class="right"><select name="res" id="select"><option value="" selected="selected">--请选择--</option><option value="true">是</option><option value="false" id="noOption">否</option></select></span></div><div class="list" id="idea"><span class="left">反馈意见：</span><span class="right"><textarea name="" id="feedback" cols="3" rows="2"></textarea></span></div><div class="list" id="sign"><span class="left">反馈签名：</span><span class="right"><input type="text" id="signature"></span></div></div><div class="foot"><span id="sure">确定</span><span id="cancel">取消</span></div></div><div id="tips" style="display: none;"></div><div class="ctnBox"><h3>给品牌财务的正文内容</h3><h4 style="margin-top:20px;margin-bottom:15px">Dear all：</h4><div><a style="text-decoration:underline;">抖音旗舰店</a>在<astyle="text-decoration:underline;">20220301--20220331</a>期间结算单结果如下，点击以下URL可下载附件结果进行查看。</div><div>结算单附件url:<a id="fileDownloand"onclick="downloadFun()">view-source:https://oms4.baozun.com/ltc/sales-data-record？target=tail.</a></div><div>请点击<a style="text-decoration:underline;" onclick="show()">处理!</a></div></div><div id="dialogCtn"><span>该结算单已被确认，无法重新操作！</span></div></body></html>
<script type="text/javascript">// 下载结算单附件urlfunction downloadFun() {document.getElementById('fileDownloand').setAttribute('href', 'http://sit-files.baozun.com/files/downloadByIdAndFileName?id=b91d862c-352e-4eba-a294-55236870392f&fileName=ONLINESTATEMENT2022032100006121b8f7b-01b7-45ae-9afe-819d50650440.zip');}function show() {var page_width = document.documentElement.scrollWidth;var page_height = document.documentElement.scrollHeight;var b_width = document.documentElement.clientWidth;var b_height = document.documentElement.clientHeight;var mask = document.createElement("div");mask.id = "mask";//mask的宽高mask.style.width = page_width + "px";mask.style.height = page_height + "px";// 加入到bodydocument.body.appendChild(mask);// 弹框var kuang = document.getElementById("tankuang");//弹框样式kuang.style.left = (b_width - 400) / 2 + "px";kuang.style.top = (b_height - 300) / 2 + "px";kuang.style.display = "block";//选择否document.getElementById("select").onclick = function () {var myselect = document.getElementById("select");var index = myselect.selectedIndex;var agree = myselect.options[index].value;var idea = document.getElementById("idea");var sign = document.getElementById("sign");if (agree == "true") {idea.style.display = "none";sign.style.display = "none";} else {idea.style.display = "block";sign.style.display = "block";}}// 确定document.getElementById("sure").onclick = function () {var myselect = document.getElementById("select");var index = myselect.selectedIndex;var agree = myselect.options[index].value;var feedback = document.getElementById("feedback").value.trim();var signature = document.getElementById("signature").value.trim();if (agree == "") {alert("是否同意结算单结果不允许为空!");return;}if (agree == "false") {if (feedback === "") {alert("反馈意见不允许为空!");return;}if (signature === "") {alert("反馈签名不允许为空!");return;}}if (agree == "true") {feedback = null;signature = null;}let xhr = new XMLHttpRequest(); // 创建XHR对象let uuid = '121';// let uuid = getQueryVariable("uuid") xhr.onreadystatechange = function () {if (xhr.readyState == 4) { // 4表示此次请求结束let result = JSON.parse(xhr.responseText);// 后端返回的结果为字符串，这里将结果转换为jsonconsole.log(result);// alert(result.message);showtips(result.message);// if (result.code !== 1) { // 这里我通过code来标识结果//  // alert(result.message);// }// 关闭弹框// document.body.removeChild(mask);// kuang.style.display = "none";}};xhr.open( // 打开链接"post","http://oms4-api-gateway-sit.baozun.com/ecs/ofa/brandFeedback", // 后端地址true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置请求头xhr.send("brandReviewPerson=" + signature +"&brandReviewResults=" + agree +"&uuid=" + uuid +"&brandReviewComments=" + feedback);}// 用于获取url参数:function getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) { return pair[1]; }}return (false);}// 取消关闭document.getElementById("cancel").onclick = function () {document.body.removeChild(mask);kuang.style.display = "none";}// mask关闭document.getElementById("mask").onclick = function () {document.body.removeChild(mask);kuang.style.display = "none";}String.prototype.trim = function () {return this.replace(/(^\s*)|(\s*$)/g, "");}}function showtips(message) {var b_width = document.documentElement.clientWidth;var b_height = document.documentElement.clientHeight;var tips = document.getElementById("tips");tips.innerHTML = message;tips.style.left = (b_width - 400) / 2 + "px";tips.style.top = (b_height - 800) / 2 + "px";tips.style.display = "block";setTimeout(() => {tips.style.display = "none";}, 1000)}
</script>

js 原生弹框post接口提示相关推荐

app android 升级提示,app版本升级原生弹框和进度提示(包含wgt升级)
更新记录 1.46(2021-03-09) 1.可修改下载提示文字; 2.可修改下载提示按钮文字; 1.45(2021-01-26) 1.修复了android自定义图片,某些图片底部出现黑线的问题查 ...
jq js 自定义弹框
自定义弹框 <body> <script type="text/javascript" src="./js/jquery-1.8.3.js"& ...
android仿ios弹框_在“提示”框中：iOS外观（在Android上运行），Google Maps作为Time Machine，下载Wii游戏保存...
android仿ios弹框 Once a week we round up some great reader tips and share them with everyone. Read on t ...
js 简单弹框toast
新建toast.js文件 function Toast(msg,duration){duration=isNaN(duration)?3000:duration;var m = document.cr ...
js 无弹框打印_打印预览,关闭窗口等js代码
我的打印预览.打印本页.另存为.关闭本页的js代码 2011-08-08 09:45:25| 分类: javascript | 标签: |字号大中小订阅 . &ltOBJECT classi ...
安装解压版MySQL时弹框报错提示：缺少 MSVCR120.dll、MSVCP120.dll、vcruntime140.dll等库的终极解决方案
解压版安装时,如果缺少 MSVCR120.dll.MSVCP120.dll.vcruntime140.dll . . . 等库,那么执行mysqld --initialize --console命令时 ...
记录一次使用 Popper.js 编写弹框遇到的问题
当前使用的 vue-popperjs 组件是基于 popper.js 开发的使用方法安装 npm i vue-popperjs 导入使用 <template><poppertri ...
js实现搜索框智能搜索提示，类似百度搜索
List item 一.概要场景:用户可能记不得是哪个搜索词了,但是结果表单是唯一的,不可能实现模糊搜索. 解决方案:搜索框实现智能搜索提示.在用户搜索键入关键字的过程中,不断去请求后台,将查询结果 ...
HTML配合js制作弹框，弹出信息框展示后台内容
最近,应公司要求需要制作一个弹出框,需求是在鼠标停留在字段上,就会弹出一个信息框弹出从后台查出来的内容.因为本猿是后端开发,对于前端的东西是半桶水,一知半解,它认识我我不认识它.所以在此记录一下Dem ...

js 原生弹框post接口提示

js 原生弹框post接口提示相关推荐

最新文章

热门文章