come cambiare lo stile della casella di avviso

Devo cambiare lo stile del pulsante “OK” in una casella di avviso.

  function show_alert() { alert("Hello! I am an alert box!"); }      

La finestra di avviso è un object di sistema e non è soggetta ai CSS. Per fare questo stile di cose è necessario creare un elemento HTML e simulare la funzionalità alert() . La scatola modale UI jQuery fa molto per te, funzionando fondamentalmente come ho descritto: Link .

Ho provato a usare lo script per gli stili di caselle alert() usando java-script Qui ho usato quelli JS e CSS.

Fare riferimento a questa funzionalità JS di codifica.

 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")); } 

E CSS per alert() Box

 #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; } 

E file HTML:

  

E guarda anche questa DEMO: JSFIDDLE e DEMO RESULT IMAGE

inserisci la descrizione dell'immagine qui

Io uso SweetAlert , It’s Awesome, riceverai molte opzioni di personalizzazione e tutte le callback

Immagine dello schermo

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

inserisci la descrizione dell'immagine qui

Non ansible. Se si desidera personalizzare l’aspetto visivo della finestra di dialogo, è necessario utilizzare una soluzione basata su JS come la finestra di dialogo jQuery.UI .

Devi creare la tua casella di avviso in questo modo:

 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!", "Okay!"); 
 #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; } 
 

TEXT

TEXT

TEXT

TEXT

TEXT

TEXT

TEXT

TEXT

TEXT

TEXT

TEXT

TEXT

TEXT

Opzione 1. puoi usare AlertifyJS , questo fa bene all’allerta

inserisci la descrizione dell'immagine qui

inserisci la descrizione dell'immagine qui

Opzione 2. si avvia o si entra semplicemente in un progetto basato su applicazioni web, il design dell’interfaccia è forse buono. Altrimenti dovrebbe essere cambiato. Per le applicazioni Web 2.0 lavorerai con contenuti dinamici, molti effetti e altre cose. Tutte queste cose vanno bene, ma nessuno ha pensato di modificare l’avviso JavaScript e confermare le caselle. Ecco il loro modo

crea un semplice nome file js jsConfirmStyle.js. Ecco un semplice codice js

 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( "
"+ ""+ ""+ ""+ ""+ "
"+ ""+ "  "+ ""+ "
"+ "
" ); } document.write("
"); 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(); }

Crea un semplice file html

   jsConfirmSyle      

  

JsConfirmStyled

standard

So che questo è un post più vecchio ma stavo cercando qualcosa di simile stamattina. Sento che la mia soluzione è stata molto più semplice dopo aver esaminato alcune delle altre soluzioni. Una cosa è che io uso il carattere fantastico nel tag di ancoraggio.

Volevo visualizzare un evento sul mio calendario quando l’utente ha fatto clic sull’evento. Quindi ho codificato un tag

separato in questo modo:

   

Trovo più facile usare i nomi delle classi nel mio jQuery poiché sto usando asp.net.

Di seguito è riportato il jquery per la mia app fullcalendar.

  

Devi avere il tuo id calendario di Google e le tue API.

Spero che questo aiuti quando hai bisogno di un semplice display popup.

        

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

Un’opzione è usare altertify , questo dà una bella casella di avviso.

Basta includere le librerie richieste da qui e utilizzare la seguente parte di codice per visualizzare la casella di avviso.

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

L’output sarà simile a questo. Per vederlo in azione ecco la demo

inserisci la descrizione dell'immagine qui

Avviso di stile () – le caselle non sono possibili. Potresti usare invece un overlay modale javascript.