gpt4 book ai didi

javascript - 我们可以在不使用alert或windows.alert的情况下弹出一个窗口吗

转载 作者:行者123 更新时间:2023-11-28 12:35:11 27 4
gpt4 key购买 nike

理想情况下,当我单击表格中的操作项时,它会在单击时显示“显示消息”,我需要一个弹出窗口,而不使用 window.alert 或警报,而是根据我的网站设计显示弹出窗口

function showFailedWarning(){
dijit.byId('validationsForm').clearMessages();
dijit.byId('validationsForm').popup(alert("Upload Correct File "));
}

最佳答案

方法#1 - 纯 JavaScript

您可以使用您想要的任何设计来构建自己的弹出窗口。要么对 HTML 中的元素进行硬编码,然后在 CSS 中将 display:none 设置为容器,要么动态附加容器。

注意: Why I used innerHTML in place of appendChild() .

Live Demo

HTML

<button id="error">Click for error</button>

JavaScript

document.getElementById('error').onclick = function (event) {
event.preventDefault();

/*Creating and appending the element */

var element = '<div id="overlay" style="opacity:0"><div id="container">';
element += "<h1>Title</h1><p>Message</p>";
element += "</div></div>";
document.body.innerHTML += (element);
document.getElementById('overlay').style.display = "block";

/* FadeIn animation, just for the sake of it */
var fadeIn = setInterval(function () {
if (document.getElementById('overlay').style.opacity > 0.98) clearInterval(fadeIn);
var overlay = document.getElementById('overlay');
overlay.style.opacity = parseFloat(overlay.style.opacity, 10) + 0.05;
console.log(parseFloat(overlay.style.opacity, 10));

}, 50);
};

CSS

#overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color: rgba(0, 0, 0, 0.5);
opacity:0;
display:none;
}
#container {
position:absolute;
top:30%;
left:50%;
margin-left:-200px;
width: 400px;
height:250px;
background-color:#111;
padding:5px;
border-radius:4px;
color:#FFF;
}
<小时/><小时/><小时/>

方法 #2 - 第三方库

您可以使用 jQuery UI 等库来实现您想要的:

Live Demo

HTML

<button id="error">Click for error</button>

JavaScript/jQuery
$('#error').click(function (event) {
event.preventDefault();
$('<div id="container"><h1>Error</h1><p>Message</p></div>').dialog({
title: "Error"
});
});

关于javascript - 我们可以在不使用alert或windows.alert的情况下弹出一个窗口吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17818229/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com