I've encountered an issue with my code where it displays a popup message correctly in Chrome, but when testing it on Firefox and Edge, it creates a strange box at the end of the page instead. Here is the code snippet I'm referring to:
var iframe = document.createElement("IFRAME");
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
if(window.frames[0].window.confirm("Are you sure you want to change brand state? Note: Changing brand state from Preview to Live will erase all data related to that brand.")) {
$.post("/brand/updateBrandState", {
'brandId': $(this).val(),
"brandState": $(this).find("option:selected").text()
}, function (data) {
if (data == "ok") {
window.location.reload(true);
}else if(data=="empty") {
alert("Cannot change state from Live to Preview");
window.location.reload(true);
}else if(data=="live") {
alert("Brand is now live!");
}
});
Any suggestions or help on how to make this code work seamlessly across different browsers would be greatly appreciated!
Thank you!
Edit:
Currently, I'm using the following HTML:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>