隐藏alert弹框中的localhost:8080(ip地址跟端口号)

在前端页面中加入下面js代码即可(作用 重写alert方法)

<script>
//重写alert
window.alert = function(name){
    var iframe = document.createElement("IFRAME");
    iframe.style.display="none";
    iframe.setAttribute("src", 'data:text/plain,');
    document.documentElement.appendChild(iframe);
    window.frames[0].window.alert(name);
    iframe.parentNode.removeChild(iframe);
}
//重写confirm 不显示ip地址  
var wConfirm = window.confirm;  
window.confirm = function (message) {  
    try {  
        var iframe = document.createElement("IFRAME");  
        iframe.style.display = "none";  
        iframe.setAttribute("src", 'data:text/plain,');  
        document.documentElement.appendChild(iframe);  
        var alertFrame = window.frames[0];  
        var iwindow = alertFrame.window;  
        if (iwindow == undefined) {  
            iwindow = alertFrame.contentWindow;  
        }  
        var result = iwindow.confirm(message);  
        iframe.parentNode.removeChild(iframe);  
        return result;  
    }  
    catch (exc) {  
        return wConfirm(message);  
    }  
</script>

重写alert方法后的样子如下图所示
在这里插入图片描述
当然啦,也可使用下面的js代码来自定义我们的alert弹框

<script>
window.alert = function(str) 
{ 
var shield = document.createElement("DIV"); 
shield.id = "shield"; 
shield.style.position = "absolute"; 
shield.style.left = "0px"; 
shield.style.top = "0px"; 
shield.style.width = "100%"; 
shield.style.height = document.body.scrollHeight+"px"; 
//弹出对话框时的背景颜色 
shield.style.background = "#fff"; 
shield.style.textAlign = "center"; 
shield.style.zIndex = "25"; 
//背景透明 IE有效 
//shield.style.filter = "alpha(opacity=0)"; 
var alertFram = document.createElement("DIV"); 
alertFram.id="alertFram"; 
alertFram.style.position = "absolute"; 
alertFram.style.left = "50%"; 
alertFram.style.top = "50%"; 
alertFram.style.marginLeft = "-225px"; 
alertFram.style.marginTop = "-75px"; 
alertFram.style.width = "450px"; 
alertFram.style.height = "150px"; 
alertFram.style.background = "#ff0000"; 
alertFram.style.textAlign = "center"; 
alertFram.style.lineHeight = "150px"; 
alertFram.style.zIndex = "300"; 
strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n"; 
strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[自定义提示]</li>\n"; 
strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+str+"</li>\n"; 
strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" οnclick=\"doOk()\" /></li>\n"; 
strHtml += "</ul>\n"; 
alertFram.innerHTML = strHtml; 
document.body.appendChild(alertFram); 
document.body.appendChild(shield); 
var ad = setInterval("doAlpha()",5); 
this.doOk = function(){ 
alertFram.style.display = "none"; 
shield.style.display = "none"; 
} 
alertFram.focus(); 
document.body.onselectstart = function(){return false;}; 
}
</script>

效果图如下图所示
在这里插入图片描述

  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
好的,下面是修改后的代码: HTML部分: ```html <!DOCTYPE html> <html> <head> <title>评论区</title> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <h1>评论区</h1> <div> <label for="username">用户名:</label> <input type="text" id="username" name="username"> </div> <div> <label for="comment">评论内容:</label> <textarea id="comment" name="comment"></textarea> </div> <button id="submit">发表评论</button> <hr> <div id="comment-list"></div> </body> </html> ``` JS部分: ```javascript $(document).ready(function(){ // 发表评论 $('#submit').click(function(){ var username = $('#username').val(); var comment = $('#comment').val(); if(username != '' && comment != ''){ // 发送POST请求 $.ajax({ url: 'http://localhost:8080/post', type: 'POST', data: { username: username, comment: comment }, success: function(data){ // 添加一条新评论 $('#comment-list').append('<p><strong>' + username + ':</strong>' + comment + '</p>'); $('#username').val(''); $('#comment').val(''); }, error: function(){ alert('发表评论失败!'); } }); } else { alert('用户名和评论内容不能为空!'); } }); // 获取评论列表 $.ajax({ url: 'http://localhost:8080/get', type: 'GET', success: function(data){ for(var i = 0; i < data.length; i++){ $('#comment-list').append('<p><strong>' + data[i].username + ':</strong>' + data[i].comment + '</p>'); } }, error: function(){ alert('获取评论列表失败!'); } }); }); ``` 修改后的代码,使用了 http://localhost:8080/post 和 http://localhost:8080/get 代替了 PHP 文件的路径,同时相应地修改了 POST 和 GET 请求的数据处理方式,以便与服务端进行通信。具体的服务端实现需要根据具体情况进行编写。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bug 

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值