我对 JS 很陌生，虽然很享受，但我发现很难获得正确的语法。我想用我自己的版本自定义我的警告框，这似乎很容易。我在这里找到了一个简洁的教程并成功运行了它，做了一些样式设计，发现它不是很适合移动设备。主要问题源于代码的两部分，此处为 CSS： #dialogbox { display: none; position: fixed; background: #0b6623; border-radius: 7px; width: 550px; z-index: 2001;}首先，对话框设置为 550px，这在大屏幕上没问题。当您运行设置对话框位置的脚本时，会出现真正的问题：function CustomAlert(){ this.render = function(dialog){ let winW = window.innerWidth; let winH = window.innerHeight; let dialogoverlay = document.getElementById('dialogoverlay'); let dialogbox = document.getElementById('dialogbox'); dialogoverlay.style.display = "block"; dialogoverlay.style.height = winH+"px"; dialogbox.style.left = (winW/2) - (550 * .5)+"px"; dialogbox.style.top = "100px"; dialogbox.style.display = "block"; document.getElementById('dialogboxhead').innerHTML = '<strong>Share your score to Facebook</strong>'; document.getElementById('dialogboxbody').innerHTML = dialog; document.getElementById('dialogboxfoot').innerHTML = '<button class="btn btn-danger" onclick="Alert.ok()"><i class="far fa-times-circle"></i> Close</button>'; } this.ok = function(){ document.getElementById('dialogbox').style.display = "none"; document.getElementById('dialogoverlay').style.display = "none"; }}let Alert = new CustomAlert();那里有线将框直接设置到屏幕的中心。我的问题是 - 我仍然想要中心屏幕，但我希望对话框流畅并缩小到手机上的大小。有没有人对如何使用该 CSS 执行此操作有建议？完整脚本可在此处获得：https://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial
1 回答
慕哥9229398
TA贡献1877条经验 获得超6个赞
好的，最后一次尝试在这里提供帮助。下面的示例代码与内置浏览器警告对话框的行为完全相同。它将框放在中间，根据内容自动调整大小，页面上的任何其他内容在对话框关闭之前不可单击或编辑。好吧，我写了一段时间了，我看不出有什么区别。它应该可以在任何设备上使用，因此可以根据需要使用、更改和设置样式。请注意“请勿更改”注释。改变它就违背了目的。您确实需要 JQuery.js，因此请在此处下载最新版本https://jquery.com/download/。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.main-container{
display: flex; /* DO NOT CHANGE */
height: 100vh; /* DO NOT CHANGE */
width: 100%; /* DO NOT CHANGE */
}
.c-message{
display: flex; /* DO NOT CHANGE */
position: fixed; /* DO NOT CHANGE */
top: 0px; /* DO NOT CHANGE */
left: 0px; /* DO NOT CHANGE */
width: 100%; /* DO NOT CHANGE */
height: 100%; /* DO NOT CHANGE */
}
.c-msgbox{
padding: 30px;
text-align: center;
margin: auto; /* DO NOT CHANGE */
background-color: #e4e4e4;
border-radius: 4px;
border: 1px solid #adadad;
-webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
-moz-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.40);
}
.standerd-button2{
border: none;
font-family: arial,helvetica,clean,sans-serif;
font-size: 10px;
font-weight: 600;
color: white;
background: #1A709F;
padding: 3px;
text-align: center;
vertical-align: middle;
-webkit-border-radius: 3px;
width: max-content;
min-width: 50px;
margin: 2px;
}
.standerd-button2:hover{
background: crimson;
cursor: default;
}
</style>
<script type="text/javascript" src="JQuery.js"></script>
</head>
<body>
<div class="main-container">
<div>
<a id="ok" href="#">Normal Alert</a>
<br>
<a id="yn" href="#">Yes/No Alert</a>
</div>
<div>
<script type="text/javascript">
$.fn.CustomAlert = function (options, callback) {
var settings = $.extend({
message: null,
detail: null,
yesno: false,
okaytext: null,
yestext: null,
notext: null
}, options);
var frm = "";
detail = "<b>" + settings.detail + "</b>";
message = "<b>" + settings.message + "</b>";
if (settings.detail === null) {
detail = "";
};
frm = frm + message + "<div style='text-align: left; margin-top: 15px; margin-bottom: 15px;'>" + detail + "</div>";
if (settings.yesno === false) {
frm = frm + "<input id='ok' type='button' value='" + settings.okaytext + "' class='standerd-button2' />";
} else {
frm = frm + "<div><input id='yes' type='button' value='" + settings.yestext + "' name='yes' class='standerd-button2' />" +
"<input id='no' type='button' value='" + settings.notext + "' name='no' class='standerd-button2' /></div>";
};
var frmesg = "<div id='cmessage' name='cmessage' class='c-message'>" +
"<div class='c-msgbox'>" +
"<form>" + frm + "</form>" +
"</div>" +
"</div>";
$(".main-container").append(frmesg);
if (!settings.yesno) {
$("#cmessage #ok").click(function () {
$("#cmessage").remove();
callback(false);
});
} else {
$("#cmessage #yes").click(function () {
$("#cmessage").remove();
callback(true);
});
$("#cmessage #no").click(function () {
$("#cmessage").remove();
callback(false);
});
};
};
$("#yn").click(function(){
$().CustomAlert({message: "<div style='text-align: left;'><p><b>Confirmation Alert</b></p></div>",
yestext: "Yes",
notext: "No",
yesno: true},
function(success){
if (success) {
null;
// Do something
} else {
null;
// Do something else
};
});
});
$("#ok").click(function(){
$().CustomAlert({message: "<div style='text-align: left;'><p><b>Bla bla bla</b></p></div>",
okaytext: "Continue",
yesno: false},
function(success){
if (success) {
null;
// Do something
};
});
});
</script>
</body>
添加回答
举报
0/150
提交
取消