如何通过此代码为移动和桌面显示自定义警报框？

如何解决如何通过此代码为移动和桌面显示自定义警报框？

我对JS还是很陌生，尽管很享受，但发现很难正确获取语法。

我想用自己的版本自定义警报框，这似乎很容易。我找到了一个简洁的教程here，并成功运行了该教程，做了一些样式设置，发现它不是非常便于移动。

主要问题来自代码的两个部分，此处为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/处下载最新的JQuery.js。

<!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.60);
        -moz-box-shadow: 0px 0px 50px rgba(0,0.60);
        box-shadow: 0px 0px 20px rgba(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 */
  }

使用vh和vw。这些是相对于浏览器窗口的视图宽度和高度。一个单位等于浏览器宽度或高度的1％。

如果要设置特定的宽度和高度，请使用vh和vw。但是我建议您将所有内容都放在具有css样式 "display: flex;"的主div中，并且未指定实际对话框（div）的大小，而仅使用"margin: auto;"的css属性。

这将使它居中，并根据框中的内容自动调整大小。但是话又说回来，如果您想指定大小，仍然可以使用vw和vh。由你决定。

我在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;
}

这不是完美的，可以接受，但是比以前提高了千分之十。

对于那些想知道为什么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.60);
    -moz-box-shadow: 0px 0px 50px rgba(0,0.60);
    box-shadow: 0px 0px 20px rgba(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中的警报功能具有一些您无法在自己的Javascript中模拟的特征，但是您可以接近它。

关于警报的主要事情是，无论发生什么其他情况，都会通知用户，因此它位于顶部。如果窗口部分不在屏幕上，它可能会在宽窗口中间丢失。

在大多数手机上，它会更好一些，因为通常情况下，如果您的代码正在运行，则窗口在屏幕上至少会部分可见。

对于您的紧迫问题，使警告框可见的最佳选择是使用视口尺寸加上固定尺寸（如您所愿）-给定的代码使用窗口尺寸，而这将无法使用在所有情况下-警报框可能都离屏幕很远-例如，如果窗口表示用户正在滚动的长滚动条。

第二，要使该框在窗口中的其他任何内容之前都可见，因此需要将CSS中的z-index设置为比您在其余代码中使用的更高的值。（有人知道是否所有的浏览器都接受Number.MAX_SAFE_INTEGER-为了最终的安全，尽管那是非常极端的）

第三，您需要在视口中修复警报框，以使用户无法滚动离开它-您希望用户做出响应，以便您知道他们已经看到了该消息并且不能完全忽略它。

第四是封锁问题。 JS警报可以做到这一点，但是让我们自己的功能来做和/或用我们自己的功能完全替换本机警报是明智的。可能不是，在某个时候您可能希望真正的警报起作用，因此最好不要理会它。

用vw替换window.width将使该框具有响应能力-但在小屏幕上可能无法读取，或者在大屏幕上可能不够大。幸运的是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.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.2);
    overflow: hidden;
    display:none;
}

#alertbox {
    font-family: Arial,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>

好的。这部分是功能

modelnew <- '
CPT =~ CPT2 + CPT3 + CPT4
ANT =~   ANT1 + ANT4 +  ANT3
ROL =~ ROL1 + ROL2 + ROL3 + ROL4

SET =~ SET1+SET2+SET3+SET4
CTO =~ CTO1+CTO2+CTO3  
RWD =~ RWD1+RWD2+RWD3



VOR =~ VOR1 + VOR2 + VOR3  +VOR4 + VOR5
DID =~ DID1 +DID2 +DID3 +DID4 +DID5
ABT =~ ABT1 +ABT2 +ABT3 +ABT4
EMT =~ VOR + DID + ABT

CPT ~~ EMT 
ROL ~~ EMT 
ANT ~~ EMT 

CPT  ~~ SET + CTO + RWD
ANT ~~ SET + CTO + RWD
ROL ~~ SET + CTO + RWD
'

如您所见，它带有一些参数。 1）是将要居中的消息。 2）消息详细信息（可选，将在左侧对齐。3）yesno是true或false。确认对话框为true或仅确定对话框为false。 4）如果yesno为假，则okaytext通常为“ Okay”或“ Continue”。 5）如果yesno为true，则yestext通常为“ Yes”。 6）notext通常为“如果yes是，则为No。所有这些都是可选的，但是有些逻辑，您将弄清楚什么时候可以通过。以下是单击事件，然后是函数调用。

    $.fn.CustomAlert = function (options,options);
     ....
     ....

$（“＃yn”）。click（function（）{//这是单击ID为“ yn”的锚点的事件，通过参数还可以看到它是确认对话框。有道理吗？

我建议花点时间学习JQuery。它不是那么困难，但功能很强大。它为您节省了大量的编码。花了我不到一天的时间，那只是w3schoole的。尝试不使用插件和JQuery UI。而是像我一样编写自己的插件。这段代码全部来自我的库。它只是有助于更好地理解它。另外，我不建议您使用引导程序，并不是说它有什么问题，但是使用您自己的CSS3样式表可以使您实现所需的功能。那只是我的意见。

如何通过此代码为移动和桌面显示自定义警报框？

如何解决如何通过此代码为移动和桌面显示自定义警报框？

解决方法

相关推荐