[英]can we have a pop up without the use of alert or windows.alert
ideally when ia click a action item in my table it shows "show message" on clicking on to it i need a popup without the use of window.alert or alert instead show a pop up based on my website design 理想情况下,当我单击表中的一个操作项时,单击它会显示“显示消息”,我需要一个不使用window.alert或alert的弹出窗口,而是根据我的网站设计显示一个弹出窗口
function showFailedWarning(){
dijit.byId('validationsForm').clearMessages();
dijit.byId('validationsForm').popup(alert("Upload Correct File "));
}
You can build your own pop-up with whatever design you want. 您可以使用任何所需的设计来构建自己的弹出窗口。 Either hardcode the elements in HTML and set
display:none
to the container in CSS, or dynamically append the container. 可以对HTML中的元素进行硬编码并在CSS中将
display:none
设置为容器,或者动态附加容器。
Note: Why I used innerHTML
in place of appendChild()
. 注意: 为什么我使用
innerHTML
代替appendChild()
。
<button id="error">Click for error</button>
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);
};
#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;
}
You can use libraries such as jQuery UI
to achieve what you want: 您可以使用
jQuery UI
库来实现所需的功能:
<button id="error">Click for error</button>
$('#error').click(function (event) {
event.preventDefault();
$('<div id="container"><h1>Error</h1><p>Message</p></div>').dialog({
title: "Error"
});
});
Since you this question has the dojo tag and you have dijit code in your example, I would suggest using dijit.Dialog
to do this. 由于您这个问题带有dojo标记,并且示例中包含dijit代码,因此建议您使用
dijit.Dialog
来执行此操作。
I put together a quick example on jsfiddle demonstrating it . 我在jsfiddle上放了一个简短的示例来演示它 。
require(['dijit/Dialog', 'dijit/form/Button'], function (Dialog, Button) {
//create a new button (doesn't matter if it is programmatically or not)
var button = new Button({
label: 'Validate',
type: 'button'
});
button.placeAt(dojo.body());
button.on('click', function () {
//instantiate the dialog with our error message and content
var dialog = new Dialog({
title:'Error Message title',
content: '<div>Something is invalid!</div>',
style:'min-width:300px;'
});
//show the error message
dialog.show();
});
});
The dojo docs for dijit/Dialog should also be helpful to look at. dijit / Dialog的dojo文档也应该对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.