我几乎已经完成了..但是有一些问题:
function doAlert(title,text) {
var alrt='<div onclick="this.parentNode.removeChild(this);" id="alert" style="background-attachment: scroll !important;background-clip: border-box !important;background-color: black !important;background-image: none !important;background-origin: padding-box !important;background: black !important;border-bottom-left-radius: 20px 20px !important;border-bottom-right-radius: 20px 20px !important;border-top-left-radius: 20px 20px !important;border-top-right-radius: 20px 20px !important;color: white !important;display: block !important;height: 480 !important;left: 50% !important;margin-bottom: 0 !important;margin-left: -360px !important;margin-right: 0 !important;margin-top: -260 !important;opacity: 0.8 !important;overflow-x: auto !important;overflow-y: auto !important;overflow: auto !important;padding-bottom: 20px !important;padding-left: 20px !important;padding-right: 20px !important;padding-top: 20px !important;position: absolute !important;text-align: center !important;top: 50% !important;width: 640 !important;z-index: 99999999 !important;font-size:3em !important;">';
alrt+=title;
alrt+='<div id=alertbody style="text-align: justify;font-size:.5em;">';
alrt+=text;
alrt+='</div>';
alrt+='</div>';
var zalert=document.createElement("div");
zalert.innerHTML=alrt;
document.body.insertBefore(zalert.firstChild,document.body.firstElementChild)
}
这个功能在普通页面上运行得很好。
它不适用于重型样式的页面。
我尝试在我的样式中添加“!important”,但没有帮助。
如果您在类似以下的页面中尝试此代码:http://www.zibri.org (例如)
请求者的尺寸不合适,位置也不合适。
有什么问题吗?
最佳答案
问题是某些宽度和高度中缺少“px”。给你:
function doAlert(title,text) {
var alrt='<div onclick="this.parentNode.removeChild(this);" id="alert" style="background-attachment: scroll !important;background-clip: border-box !important;background-color: black !important;background-image: none !important;background-origin: padding-box !important;background: black !important;border-bottom-left-radius: 20px 20px !important;border-bottom-right-radius: 20px 20px !important;border-top-left-radius: 20px 20px !important;border-top-right-radius: 20px 20px !important;color: white !important;display: block !important;height: 480px !important;left: 50% !important;margin-bottom: 0 !important;margin-left: -360px !important;margin-right: 0 !important;margin-top: -260px !important;opacity: 0.8 !important;overflow-x: auto !important;overflow-y: auto !important;overflow: auto !important;padding-bottom: 20px !important;padding-left: 20px !important;padding-right: 20px !important;padding-top: 20px !important;position: fixed !important;text-align: center !important;top: 50% !important;width: 640px !important;z-index: 99999999 !important;font-size:3em !important;">';
alrt+=title;
alrt+='<div id=alertbody style="text-align: justify;font-size:.5em;">';
alrt+=text;
alrt+='</div>';
alrt+='</div>';
var zalert=document.createElement("div");
zalert.innerHTML=alrt;
document.body.insertBefore(zalert.firstChild,document.body.firstElementChild)
}
随意改进它..但在这里发布结果! :)
关于javascript透明警报居中且位于顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2001509/