猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何从此代码自定义移动和桌面显示的警告框？

我对 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


九州编程
浏览 91回答 1
1回答

慕哥9229398

好的，最后一次尝试在这里提供帮助。下面的示例代码与内置浏览器警告对话框的行为完全相同。它将框放在中间，根据内容自动调整大小，页面上的任何其他内容在对话框关闭之前不可单击或编辑。好吧，我写了一段时间了，我看不出有什么区别。它应该可以在任何设备上使用，因此可以根据需要使用、更改和设置样式。请注意“请勿更改”注释。改变它就违背了目的。您确实需要 JQuery.js，因此请在此处下载最新版本https://jquery.com/download/。<!DOCTYPE html><html><head><style type="text/css">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; .main-container{&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; /* DO NOT CHANGE */&nbsp; &nbsp; &nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; /* DO NOT CHANGE */&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; /* DO NOT CHANGE */&nbsp; &nbsp; }&nbsp; &nbsp; .c-message{&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; /* DO NOT CHANGE */&nbsp; &nbsp; &nbsp; &nbsp; position: fixed;&nbsp; /* DO NOT CHANGE */&nbsp; &nbsp; &nbsp; &nbsp; top: 0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/* DO NOT CHANGE */&nbsp; &nbsp; &nbsp; &nbsp; left: 0px;&nbsp; &nbsp; &nbsp; &nbsp; /* DO NOT CHANGE */&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; /* DO NOT CHANGE */&nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp;/* DO NOT CHANGE */&nbsp; &nbsp; }&nbsp; &nbsp; .c-msgbox{&nbsp; &nbsp; &nbsp; &nbsp; padding: 30px;&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; margin: auto; /* DO NOT CHANGE */&nbsp; &nbsp; &nbsp; &nbsp; background-color: #e4e4e4;&nbsp; &nbsp; &nbsp; &nbsp; border-radius: 4px;&nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #adadad;&nbsp; &nbsp; &nbsp; &nbsp; -webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);&nbsp; &nbsp; &nbsp; &nbsp; -moz-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);&nbsp; &nbsp; &nbsp; &nbsp; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.40);&nbsp; &nbsp; }&nbsp; &nbsp; .standerd-button2{&nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; font-family: arial,helvetica,clean,sans-serif;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 10px;&nbsp; &nbsp; &nbsp; &nbsp; font-weight: 600;&nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; background: #1A709F;&nbsp; &nbsp; &nbsp; &nbsp; padding: 3px;&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; &nbsp; &nbsp; -webkit-border-radius: 3px;&nbsp; &nbsp; &nbsp; &nbsp; width: max-content;&nbsp; &nbsp; &nbsp; &nbsp; min-width: 50px;&nbsp; &nbsp; &nbsp; &nbsp; margin: 2px;&nbsp; &nbsp; }&nbsp; &nbsp; .standerd-button2:hover{&nbsp; &nbsp; &nbsp; &nbsp; background: crimson;&nbsp; &nbsp; &nbsp; &nbsp; cursor: default;&nbsp; &nbsp; }</style><script type="text/javascript" src="JQuery.js"></script></head><body><div class="main-container">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <a id="ok" href="#">Normal Alert</a>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; <a id="yn" href="#">Yes/No Alert</a>&nbsp; &nbsp; </div><div><script type="text/javascript">&nbsp; &nbsp; $.fn.CustomAlert = function (options, callback) {&nbsp; &nbsp; &nbsp; &nbsp; var settings = $.extend({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; detail: null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yesno: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; okaytext: null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yestext: null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; notext: null&nbsp; &nbsp; &nbsp; &nbsp; }, options);&nbsp; &nbsp; &nbsp; &nbsp; var frm = "";&nbsp; &nbsp; &nbsp; &nbsp; detail = "<b>" + settings.detail + "</b>";&nbsp; &nbsp; &nbsp; &nbsp; message = "<b>" + settings.message + "</b>";&nbsp; &nbsp; &nbsp; &nbsp; if (settings.detail === null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; detail = "";&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; frm = frm + message + "<div style='text-align: left; margin-top: 15px; margin-bottom: 15px;'>" + detail + "</div>";&nbsp; &nbsp; &nbsp; &nbsp; if (settings.yesno === false) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; frm = frm + "<input id='ok' type='button' value='" + settings.okaytext + "' class='standerd-button2' />";&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; frm = frm + "<div><input id='yes' type='button' value='" + settings.yestext + "' name='yes' class='standerd-button2' />" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<input id='no' type='button' value='" + settings.notext + "' name='no' class='standerd-button2' /></div>";&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; var frmesg = "<div id='cmessage' name='cmessage' class='c-message'>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"<div class='c-msgbox'>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"<form>" + frm + "</form>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"</div>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"</div>";&nbsp; &nbsp; &nbsp; &nbsp; $(".main-container").append(frmesg);&nbsp; &nbsp; &nbsp; &nbsp; if (!settings.yesno) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#cmessage #ok").click(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#cmessage").remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback(false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#cmessage #yes").click(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#cmessage").remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback(true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#cmessage #no").click(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#cmessage").remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback(false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; };&nbsp; &nbsp; $("#yn").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $().CustomAlert({message: "<div style='text-align: left;'><p><b>Confirmation Alert</b></p></div>",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;yestext: "Yes",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;notext: "No",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;yesno: true},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function(success){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (success) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;null;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Do something&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;null;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Do something else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;};&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; $("#ok").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $().CustomAlert({message: "<div style='text-align: left;'><p><b>Bla bla bla</b></p></div>",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;okaytext: "Continue",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;yesno: false},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function(success){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (success) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;null;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Do something&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;};&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;</script></body>&nbsp;
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript