Wie ändere ich den Stil des Warnfelds?

Lesezeit: 10 Minuten

Wie andere ich den Stil des Warnfelds
Jay

Ich muss den Stil des “OK”-Buttons in einem ändern Alarm Kasten.

<head>
    <script type="text/javascript">
        function show_alert() {
            alert("Hello! I am an alert box!");
        }
    </script>
</head>
<body>
    <input type="button" onclick="show_alert()" value="Show alert box" />
</body>

  • Du kannst nicht. Sie müssen Ihre eigenen erstellen. Beispiel: jQuery-UI-Dialog: jqueryui.it/demos/dialog

    – James Allardice

    21. Oktober 2011 um 17:39 Uhr


  • Bitte verwenden Sie keine Alarmboxen. Es gibt bessere Möglichkeiten. Verwenden Sie sie einfach zum Debuggen.

    – Ed heilen

    21. Oktober 2011 um 17:40 Uhr

  • lmao @EdHeal, bitte verwende diese nicht zum Debuggen! xD Es gibt bessere optoins xD

    – EricG

    26. November 2012 um 13:58 Uhr

  • Ich habe langweilig mit einer langweiligen Sache angefangen xD codepen.io/anon/pen/tFhKu

    – EricG

    26. November 2012 um 13:59 Uhr

  • Abgestimmt für die Annahme von jQuery als “Antwort”. Die richtige Antwort ist, sich für einen Versuch einzusetzen, etwas in einer CSS-Spezifikation zu standardisieren.

    – John

    13. Februar 2018 um 7:56 Uhr

1647276907 120 Wie andere ich den Stil des Warnfelds
PCasagrande

Die Warnbox ist ein Systemobjekt und unterliegt nicht CSS. Um diese Art von Dingen zu tun, müssten Sie ein HTML-Element erstellen und das nachahmen alert() Funktionalität. Der jQuery-UI-Dialog erledigt einen Großteil der Arbeit für Sie und funktioniert im Wesentlichen so, wie ich es beschrieben habe: Verknüpfung.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="http://stackoverflow.com/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
 
</body>
</html>

  • Seien Sie vorsichtig, da das Modal-Feld von jQueryUI die Ausführung des Jquery-Codes NICHT anhält und auf den Klick des Benutzers wartet (wie dies bei Warnungen der Fall ist).

    – T30

    14. November 2014 um 9:28 Uhr


  • Eine gute Möglichkeit, damit umzugehen, besteht darin, event.preventDefault() in Ihren Event-Handler aufzunehmen.

    – PCasagrande

    19. November 2014 um 16:29 Uhr

  • Sie können pure js verwenden, um eine Warnung zu erstellen stackoverflow.com/a/30498126/4696809

    – Keval Bhatt

    5. April 2018 um 7:20 Uhr

Wie andere ich den Stil des Warnfelds
Juwel

ich benutze SweetAlert, Es ist fantastisch, Sie erhalten viele Anpassungsoptionen sowie alle Rückrufe

Bildschirmfoto

swal("Here's a message!", "It's pretty, isn't it?");

Geben Sie hier die Bildbeschreibung ein

  • Können wir dies in reinem Javascript und HTML verwenden?

    – Sukanya Pai

    7. August 2019 um 6:35 Uhr

  • sweetalert hat zu viele Probleme + die letzte Veröffentlichung war vor 2 Jahren, überprüfen Sie sweetalert 2 – sweetalert2.github.io

    – Deutscher Vinsmoke

    9. November 2020 um 14:05 Uhr

Wie andere ich den Stil des Warnfelds
VIVEK-MDU

Ich habe versucht, Skript für zu verwenden alert() Boxstile verwenden java-script.Hier habe ich diese JS und CSS verwendet.

Verweisen Sie auf diese Codierungs-JS-Funktionalität.

var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";

if(document.getElementById) {
    window.alert = function(txt) {
        createCustomAlert(txt);
    }
}

function createCustomAlert(txt) {
    d = document;

    if(d.getElementById("modalContainer")) return;

    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    mObj.id = "modalContainer";
    mObj.style.height = d.documentElement.scrollHeight + "px";

    alertObj = mObj.appendChild(d.createElement("div"));
    alertObj.id = "alertBox";
    if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
    alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
    alertObj.style.visiblity="visible";

    h1 = alertObj.appendChild(d.createElement("h1"));
    h1.appendChild(d.createTextNode(ALERT_TITLE));

    msg = alertObj.appendChild(d.createElement("p"));
    //msg.appendChild(d.createTextNode(txt));
    msg.innerHTML = txt;

    btn = alertObj.appendChild(d.createElement("a"));
    btn.id = "closeBtn";
    btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
    btn.href = "#";
    btn.focus();
    btn.onclick = function() { removeCustomAlert();return false; }

    alertObj.style.display = "block";

}

function removeCustomAlert() {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}

Und CSS zum alert() Kasten

#modalContainer {
    background-color:rgba(0, 0, 0, 0.3);
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:10000;
    background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}

#alertBox {
    position:relative;
    width:300px;
    min-height:100px;
    margin-top:50px;
    border:1px solid #666;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:20px 30px;
}

#modalContainer > #alertBox {
    position:fixed;
}

#alertBox h1 {
    margin:0;
    font:bold 0.9em verdana,arial;
    background-color:#3073BB;
    color:#FFF;
    border-bottom:1px solid #000;
    padding:2px 0 2px 5px;
}

#alertBox p {
    font:0.7em verdana,arial;
    height:50px;
    padding-left:5px;
    margin-left:55px;
}

#alertBox #closeBtn {
    display:block;
    position:relative;
    margin:5px auto;
    padding:7px;
    border:0 none;
    width:70px;
    font:0.7em verdana,arial;
    text-transform:uppercase;
    text-align:center;
    color:#FFF;
    background-color:#357EBD;
    border-radius: 3px;
    text-decoration:none;
}

/* unrelated styles */

#mContainer {
    position:relative;
    width:600px;
    margin:auto;
    padding:5px;
    border-top:2px solid #000;
    border-bottom:2px solid #000;
    font:0.7em verdana,arial;
}

h1,h2 {
    margin:0;
    padding:4px;
    font:bold 1.5em verdana;
    border-bottom:1px solid #000;
}

code {
    font-size:1.2em;
    color:#069;
}

#credits {
    position:relative;
    margin:25px auto 0px auto;
    width:350px; 
    font:0.7em verdana;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    height:90px;
    padding-top:4px;
}

#credits img {
    float:left;
    margin:5px 10px 5px 0px;
    border:1px solid #000000;
    width:80px;
    height:79px;
}

.important {
    background-color:#F5FCC8;
    padding:2px;
}

code span {
    color:green;
}

Und HTML-Datei:

<input type="button" value = "Test the alert" onclick="alert('Alert this pages');" />

Und auch dies anzeigen DEMO: JSFIDDLE und DEMO-ERGEBNISBILD

Geben Sie hier die Bildbeschreibung ein

  • Dies ist jedoch eine benutzerdefinierte Warnung, nicht das Design der ursprünglichen Browser-Warnungsbox. Gibt es einen Trick, den wir noch vermissen?

    – Pratik

    19. Mai 2015 um 6:54 Uhr

  • Die benutzerdefinierte Warnung in der Antwort ist nicht mit der nativen Warnung kompatibel. Die native Warnung und Eingabeaufforderung sind Block-and-Wait.

    – Beeno Tung

    17. Juni 2019 um 8:32 Uhr

  • Wie kann ich es für die Bestätigungsbox schaffen?

    – Lamas

    23. Oktober 2021 um 20:01 Uhr

Nicht möglich. Wenn Sie das visuelle Erscheinungsbild des Dialogfelds anpassen möchten, müssen Sie eine JS-basierte Lösung wie verwenden jQuery.UI-Dialog.

1647276910 837 Wie andere ich den Stil des Warnfelds
Shafiqul Islam

Option 1. Sie können verwenden AlertifyJS das ist gut für die Aufmerksamkeit

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Option 2. Wenn Sie ein auf Webanwendungen basierendes Projekt starten oder einfach nur daran teilnehmen, ist das Design der Benutzeroberfläche vielleicht gut. Andernfalls sollte dies geändert werden. Für Web 2.0-Anwendungen arbeiten Sie mit dynamischen Inhalten, vielen Effekten und anderem Kram. All diese Dinge sind in Ordnung, aber niemand hat daran gedacht, die JavaScript-Warn- und Bestätigungsfelder zu gestalten. Hier ist der Weg

Erstellen Sie einen einfachen js-Dateinamen jsConfirmStyle.js. Hier ist einfacher js-Code

ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
nn6=(document.getElementById&&!document.all)?1:0;

xConfirmStart=800;
yConfirmStart=100;

if(ie5||nn6) {
if(ie5) cs=2,th=30;
else cs=0,th=20;
document.write(
    "<div id='jsconfirm'>"+
        "<table>"+
            "<tr><td id='jsconfirmtitle'></td></tr>"+
            "<tr><td id='jsconfirmcontent'></td></tr>"+
            "<tr><td id='jsconfirmbuttons'>"+
                "<input id='jsconfirmleft' type="button" value="" onclick='leftJsConfirm()' onfocus="if(this.blur)this.blur()">"+
                "&nbsp;&nbsp;"+
                "<input id='jsconfirmright' type="button" value="" onclick='rightJsConfirm()' onfocus="if(this.blur)this.blur()">"+
            "</td></tr>"+
        "</table>"+
    "</div>"
);
 }

           document.write("<div id='jsconfirmfade'></div>");


function leftJsConfirm() {
document.getElementById('jsconfirm').style.top=-1000;
document.location.href=leftJsConfirmUri;
}
function rightJsConfirm() {
document.getElementById('jsconfirm').style.top=-1000;
document.location.href=rightJsConfirmUri;
}
function confirmAlternative() {
if(confirm("Scipt requieres a better browser!"))       document.location.href="http://www.mozilla.org";
 }

leftJsConfirmUri = '';
rightJsConfirmUri = '';

/**
 * Show the message/confirm box
*/
function showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,confirmrighturi)  {
document.getElementById("jsconfirmtitle").innerHTML=confirmtitle;
document.getElementById("jsconfirmcontent").innerHTML=confirmcontent;
document.getElementById("jsconfirmleft").value=confirmlefttext;
document.getElementById("jsconfirmright").value=confirmrighttext;
leftJsConfirmUri=confirmlefturi;
rightJsConfirmUri=confirmrighturi;
xConfirm=xConfirmStart, yConfirm=yConfirmStart;
if(ie5) {
    document.getElementById("jsconfirm").style.left="25%";
    document.getElementById("jsconfirm").style.top='35%';
}
else if(nn6) {
    document.getElementById("jsconfirm").style.top='25%';
    document.getElementById("jsconfirm").style.left="35%";
}
else confirmAlternative();
}

Erstellen Sie eine einfache HTML-Datei

<html>
<head>
<title>jsConfirmSyle</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="https://stackoverflow.com/questions/7853130/jsConfirmStyle.js"></script>
<script type="text/javascript">

 function confirmation() {
 var answer = confirm("Wanna visit google?")
 if (answer){
    window.location = "http://www.google.com/";
}
}
  </script>
   <style type="text/css">
    body {
  background-color: white;
   font-family: sans-serif;
  }
#jsconfirm {
border-color: #c0c0c0;
border-width: 2px 4px 4px 2px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: -1000px;
z-index: 100;
}

#jsconfirm table {
background-color: #fff;
border: 2px groove #c0c0c0;
height: 150px;
width: 300px;
}

#jsconfirmtitle {
background-color: #B0B0B0;
font-weight: bold;
height: 20px;
text-align: center;
}

#jsconfirmbuttons {
height: 50px;
text-align: center;
}

#jsconfirmbuttons input {
background-color: #E9E9CF;
color: #000000;
font-weight: bold;
width: 125px;
height: 33px;
padding-left: 20px;
}

#jsconfirmleft{
background-image: url(left.png);
}

#jsconfirmright{
background-image: url(right.png);
}
</style>

 <p>
<a href="#"  onclick="javascript:showConfirm('Please confirm','Are you really sure to visit google?','Yes','http://www.google.com','No','#')">JsConfirmStyled</a> </p>
<p><a href="#" onclick="confirmation()">standard</a></p>


</body>
 </html>

1647276911 520 Wie andere ich den Stil des Warnfelds
Sternenstaub

Sie müssen Ihr eigenes Warnfeld wie folgt erstellen:

function jAlert(text, customokay){
	document.getElementById('jAlert_content').innerHTML = text;
    document.getElementById('jAlert_ok').innerHTML = customokay;
    document.body.style.backgroundColor = "gray";
    document.body.style.cursor="wait";
}



jAlert("Stop! Stop!", "<b>Okay!</b>");
#jAlert_table, #jAlert_th, #jAlert_td{
    border: 2px solid blue;
    background-color:lightblue;
    border-collapse: collapse;
    width=100px;
}

#jAlert_th, #jAlert_td{
    padding:5px;
    padding-right:10px;
    padding-left:10px;
}

#jAlert{
    /* Position fixed */
    position:fixed;
    /* Center it! */
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}
<p>TEXT</p>
<div id="jAlRem">
    <div id="jAlert">
        <table id="jAlert_table">
            <tr id="jAlert_tr">
                <td id="jAlert_td">  <p id="jAlert_content"></p>  </td>
                <td id="jAlert_td">  <button id='jAlert_ok'  onclick="jAlertagree()"></button>  </td>
            </tr>
        </table>
    </div>
</div>





<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>


<script>
function jAlertagree(){
    var parent = document.getElementById('jAlRem');
    var child = document.getElementById('jAlert');
    parent.removeChild(child);
    document.body.style.backgroundColor="white";
    document.body.style.cursor="default";
}
</script>

Der js-Teil ruft das Element im HTML-Code ab, um das Warnfeld zu erstellen, und löscht es dann, nachdem der Benutzer darauf geklickt hat OK.

Sie können den Alarm mit aufrufen jAlert("Custom Text", "Ok!");

Eine Option ist die Verwendung änderndies ergibt ein gut aussehendes Warnfeld.

Binden Sie einfach die benötigten Bibliotheken aus Hierund verwenden Sie den folgenden Codeabschnitt, um das Warnfeld anzuzeigen.

alertify.confirm("This is a confirm dialog.",
  function(){
    alertify.success('Ok');
  },
  function(){
    alertify.error('Cancel');
  });

Die Ausgabe wird wie folgt aussehen. Um es hier in Aktion zu sehen, ist die Demo

Geben Sie hier die Bildbeschreibung ein

1002450cookie-checkWie ändere ich den Stil des Warnfelds?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy