21xrx.com
2024-09-20 05:51:18 Friday
登录
文章检索 我的文章 写文章
如何使用JavaScript中的alert函数实现自定义弹窗?
2023-06-17 09:35:31 深夜i     --     --
JavaScript 自定义 alert

JavaScript中的alert函数可以用于弹出警告框,但是其默认内容和样式都比较单一,无法满足个性化的需求。本文将介绍如何使用JavaScript中的alert函数实现自定义弹窗,并提供相关的代码案例。

在JavaScript中,我们可以通过覆盖默认的alert函数来实现自定义弹窗。具体实现方式如下:


// 保存默认的alert函数

var old_alert = window.alert;

// 自定义alert函数

window.alert = function(msg){

 // 创建弹窗元素

 var alert_box = document.createElement('div');

 alert_box.style.position = 'fixed';

 alert_box.style.top = '50%';

 alert_box.style.left = '50%';

 alert_box.style.transform = 'translate(-50%, -50%)';

 

 var alert_bg = document.createElement('div');

 alert_bg.style.position = 'absolute';

 alert_bg.style.opacity = '0.5';

 alert_bg.style.top = '0';

 alert_bg.style.left = '0';

 alert_bg.style.width = '100%';

 alert_bg.style.height = '100%';

 alert_bg.style.backgroundColor = '#000';

 

 var alert_content = document.createElement('div');

 alert_content.style.padding = '20px';

 alert_content.style.backgroundColor = '#fff';

 alert_content.style.borderRadius = '5px';

 alert_content.innerHTML = msg;

 

 var alert_btn = document.createElement('button');

 alert_btn.innerHTML = '确定';

 alert_btn.onclick = function(){

  document.body.removeChild(alert_box);

 };

 

 alert_box.appendChild(alert_bg);

 alert_box.appendChild(alert_content);

 alert_content.appendChild(alert_btn);

 

 document.body.appendChild(alert_box);

};

// 使用自定义alert函数

alert('这是一个自定义弹窗!');

上述代码中,我们先保存了默认的alert函数,并自定义了一个新的alert函数。该新alert函数首先创建了一个固定定位的元素alert_box,并将其居中定位。然后,我们创建了两个子元素,一个半透明的背景alert_bg,一个用于显示内容和确定按钮的alert_content。最后,我们将这三个元素依次添加到了页面上。

如果我们想使用自定义的alert函数,只需要使用alert(msg)即可,其中msg为弹窗要显示的内容。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复