我对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
谢谢：)
最后一次尝试在这里提供帮助。下面的示例代码的行为与内置的浏览器警报对话框完全相同。它将框放在中间，根据内容自动调整大小，在对话框关闭之前，页面上的任何其他内容都不可点击或编辑。我写的是很久以前的事了，我看不出有什么不同。它应该适用于任何设备，所以使用它，更改它，按照你想要的方式设计它。注意"；不要改变"；评论。改变它会破坏目的。你确实需要JQuery.js，所以在这里下载最新的https://jquery.com/download/.
<!DOCTYPE html>
<html lang="en">
<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>
您可以使用媒体查询。如果需要，在手机、平板电脑和桌面上为您的模式对话框提供不同的风格。https://www.w3schools.com/css/css_rwd_mediaqueries.asp
@media only screen and (min-width: 480px) {
#dialogbox {
/* your mobile styles */
}
}
@media only screen and (min-width: 720px) {
#dialogbox {
/* your mobile styles */
}
}
#dialogbox {
/* your normal styles */
}
我在JS中使用了这个函数，但删除了一行及其变量：
let winW = window.innerWidth;
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
CSS也有一些变化：
#dialogbox {
display: none;
position: fixed;
margin-top: 17.5%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #0b6623;
border-radius: 7px;
width: 67.7%;
max-width: 550px;
z-index: 2001;
}
当然，它并不完美，但它比以前好了1000倍中的10倍。
对于那些想知道为什么z索引为2001的人，因为我使用的是引导模式，它们的z索引约为1040。2000的z索引被白色覆盖占据(请参阅OP中的代码)。
如果我认为你想要的是正确的，这就是我的建议。将此复制到下面并进行测试。如果这不是你所需要的，对不起，只是尽力帮你。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main-container{
display: flex;
height: 100vh;
width: 100%;
}
.dialogbox{
display: flex;
margin: auto;
padding: 20px;
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);
}
.dialogbox .dialogtext{
margin: auto;
}
</style>
</head>
<body>
<div class="main-container">
<div class="dialogbox">
<span class="dialogtext">
<h3>Some text</h3>
</span>
</div>
<div>
</body>
注意：这个答案已经变得有些散漫了，就回答设置的问题而言，使用CSS vw/vh和其他贡献者推荐的媒体查询将解决眼前的问题。不过，我在这里留下了这个答案，因为思考这个问题会引发其他问题，比如"我们试图用警报功能做什么？">
Javascript中的alert函数具有一些您无法在自己的Javascript中模仿的特性，但您可以接近这些特性。
警报的主要作用是，无论发生了什么，用户都会得到通知，所以它位于顶部。如果窗口部分离开屏幕，它可能会在宽窗口的中间"丢失"。
不过，在大多数手机上，这要好一点，因为通常情况下，如果你的代码正在运行，窗口至少会在屏幕上部分可见。
对于您的直接问题，使警报框可见的最佳方法是使用视口尺寸加上固定尺寸(正如您所做的那样)-给定的代码使用窗口尺寸，但这在所有情况下都不起作用-警报框可能远离屏幕-例如，如果窗口表示用户正在滚动的长滚动。
其次，您希望该框在窗口中的任何其他内容之上都可见，因此需要将CSS中的z索引设置为比您在其他代码中使用的更高的值。(有人知道是否所有浏览器都会接受Number.MAX_SAFE_INTEGER吗？为了最终的安全，尽管这将是非常极端的)
第三，你需要修复视口中的警报框，这样用户就不能滚动离开它——你希望用户做出回应，这样你就知道他们已经看到了消息，不能完全忽略它。
第四是封锁问题。JS警报可以做到这一点，但让我们自己的函数来做这件事和/或用我们自己的功能完全取代原生警报是明智的吗。可能不会，在某个时候，你可能希望真正的警报发挥作用，所以最好不要管它。
将window.width替换为vw将使盒子具有响应能力，但它可能在小屏幕上无法读取，或者在大屏幕上不够大。幸运的是，CSS有媒体查询，所以你可以在最常见的屏幕大小上使用断点来决定提醒框的宽度(你需要让高度可以滚动，因为你不知道要显示多少信息)。
注意：下面的代码使用了与原始问题不同的命名，以防止混淆，因为某些元素的使用略有不同。
将样式，尤其是大小的决定完全转移到CSS上JS可能会变成这样：
function myAlert(alertMessage){
document.getElementById('alertinfo').innerHTML = alertMessage;
document.getElementById('alertoverlay').style.display = "block";
}
function myRemove(event) {
event.preventDefault();
event.stopPropagation();
document.getElementById('alertoverlay').style.display = 'none';
}
CSS
#alertoverlay {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999999;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
display: none;
}
#alertbox {
font-family: Arial, Helvetica, sans-serif;
width : 100vw;
height: auto;
overflow-y: auto;
position: fixed;
font-size: 10px;
background-color: white;
text-align: center;
}
#alertheader {
font-size: 3em;
}
#alertinfo {
margin-top: 20px;
}
#alertokbox {
width: 44px;
height: 44px !important;
float: right;
margin: 10px;
border-style: solid;
border-radius: 10%;
vertical-align: center;
}
#alertok {
margin-top: 14px;
}
@media only screen and (min-width: 550px) {
#alertbox {
width: 550px;
left: 50vw;
margin-left: -275px;
font-size: 16px;
}
}
@media only screen and (min-width: 1600px) {
#alertbox {
width: 30vw;
left: 50vw;
margin-left: -15vw;
font-size: 1vw;
}
}
HTML
<div id="alertoverlay">
<div id="alertbox">
<div id="alertheader">Alert</div>
<div id="alertinfo"></div>
<div id="alertokbox" onclick="myRemove(event);"></div>
<div id="alertok">OK</div>
</div>
</div>
你可以有任意多的媒体"断点"——例如，如果你正在为一个巨大的显示屏编码，一直到最小的智能手机，你需要考虑你想要你的盒子有多大。
要使居中工作(CSS中的左侧和边距左侧设置)，您需要在div中设置警告框，该div的宽度固定为屏幕宽度-因此左侧：0；右：0；
<!DOCTYPE html>
<html>
<head>
<style>
#alertoverlay {
position: fixed;
left: 0;
top:0;
bottom:0;
right:0;
z-index: 999999;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
display:none;
}
#alertbox {
font-family: Arial, Helvetica, sans-serif;
width : 100vw;
height: auto;
overflow-y: auto;
position: fixed;
font-size: 10px;
background-color:white;
text-align:center;
}
#alertheader {
font-size: 3em;
}
#alertinfo {
margin-top: 20px;
}
#alertokbox {
width:44px;
height: 44px !important;
float:right;
margin: 10px;
border-style: solid;
border-radius: 10%;
vertical-align:center;
}
#alertok {
margin-top:14px;
}
@media only screen and (min-width: 550px) {
#alertbox {
width: 550px;
left:50vw;
margin-left:-275px;
font-size: 16px;
}
}
@media only screen and (min-width: 1600px) {
#alertbox {
width: 30vw;
left: 50vw;
margin-left: -15vw;
font-size: 1vw;
}
}
#application {
width:2000px;
height:2000px;
background-color: white;
}
</style>
</head>
<body>
<div id="application">
<button onclick="myAlert('Read this important message then click OK');">Click me to show an alert</button>
</div>
<div id="alertoverlay">
<div id="alertbox">
<div id="alertheader">Alert</div>
<div id="alertinfo"></div>
<div id="alertokbox" onclick="myRemove(event);"><div id="alertok">OK</div></div>
</div>
</div>
<script>
function myAlert(alertMessage){
document.getElementById('alertinfo').innerHTML = alertMessage;
document.getElementById('alertoverlay').style.display = "block";
}
function myRemove(event) {
event.preventDefault();
event.stopPropagation();
document.getElementById('alertoverlay').style.display='none';
}
</script>
</body>
</html>好的。这部分是的功能
$.fn.CustomAlert = function (options, callback) {
var settings = $.extend({
message: null,
detail: null,
yesno: false,
okaytext: null,
yestext: null,
notext: null
}, options);
....
....
正如您所看到的，它需要一些参数。1) 是要居中显示的信息。2) 消息详细信息(可选，将向左对齐。3)yesno为true或false。True表示确认对话框，false表示确定对话框。4) okaytext通常是"；好的"或"；继续"；如果yesno是假的。5) yestext通常是"；是"；如果是真的。6) notext通常是"；如果"是"是真的，就不会。所有这些都是可选的，但只要有一点逻辑，你就会知道什么时候通过。下面是单击事件，然后是函数调用。
$("#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
};
});
});
$("#yn").click(function()｛//这是id为"yn"的锚点被单击时的事件。通过参数，您还可以看到它是确认对话框。有道理吗？
我建议花点时间学习JQuery。它不那么困难，也很强大。它为您节省了大量的编码。我只花了不到一天的时间，而这只是从w3schoole开始的。尽量不要使用插件和JQuery UI。不如像我一样编写自己的插件。这些代码都来自我的库。这只是有助于更好地理解它。此外，我不建议使用bootstrap，并不是说它有什么问题，而是做自己的CSS3样式表可以让你得到你想要的。这只是我的看法。
使用vh和vw。这些是相对于浏览器窗口的视图宽度和高度。一个单位等于浏览器宽度或高度的1%。
如果要设置特定的宽度和高度，请使用vh和vw。但我建议将您的所有内容放在一个主div中，该主div具有css样式"display: flex;"，并且您的实际对话框(div)大小未指定，而仅具有css属性"margin: auto;"。
这将使其居中，并根据您在框中的内容自动调整大小。但话说回来，如果你想指定一个大小，你仍然可以使用vw和vh。由你决定。