第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何從此代碼自定義移動和桌面顯示的警告框？

如何從此代碼自定義移動和桌面顯示的警告框？

九州編程 2023-03-24 15:41:55
我對 JS 很陌生，雖然很享受，但我發(fā)現(xiàn)很難獲得正確的語法。我想用我自己的版本自定義我的警告框，這似乎很容易。我在這里找到了一個簡潔的教程并成功運行了它，做了一些樣式設計，發(fā)現(xiàn)它不是很適合移動設備。主要問題源于代碼的兩部分，此處為 CSS：    #dialogbox {  display: none;  position: fixed;  background: #0b6623;  border-radius: 7px;  width: 550px;  z-index: 2001;}首先，對話框設置為 550px，這在大屏幕上沒問題。當您運行設置對話框位置的腳本時，會出現(xiàn)真正的問題：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 執(zhí)行此操作有建議？完整腳本可在此處獲得：https://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial
查看完整描述

1 回答

?
慕哥9229398

TA貢獻1877條經(jīng)驗 獲得超6個贊

好的，最后一次嘗試在這里提供幫助。下面的示例代碼與內(nèi)置瀏覽器警告對話框的行為完全相同。它將框放在中間，根據(jù)內(nèi)容自動調(diào)整大小，頁面上的任何其他內(nèi)容在對話框關閉之前不可單擊或編輯。好吧，我寫了一段時間了，我看不出有什么區(qū)別。它應該可以在任何設備上使用，因此可以根據(jù)需要使用、更改和設置樣式。請注意“請勿更改”注釋。改變它就違背了目的。您確實需要 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> 



查看完整回答
反對 回復 2023-03-24
  • 1 回答
  • 0 關注
  • 104 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號