Come lasciare il mio allarme con un look migliore utilizzando il modale?

Ho un allarme JavaScript che funziona perfettamente per ciò che voglio farlo facendo un resoconto di un avviso facendo clic su # menu2, tuttavia voglio cambiare la parte visiva dell'allarme per funzionare perfettamente nel browser Chrome. Per questo ho provato più volte l'uso di jQuery, Bootbox tra gli altri. Quindi ho provato una programmazione migliore per rendere il mio script più user-friendly.

Ho provato ad usare, ma a nessun risultato per me.

http://jqueryui.com/dialog/

http://bootboxjs.com/

Tra le altre opzioni di una precedente domanda:

come modificare lo stile della casella di avviso

Ecco il mio html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <ul id='menu'> <li id='menu1'><a href='/web/front/helpdesk.public.php' title="Home" class='itemP'>Home</a> </li> <li id='menu2'><a href='/web/front/helpdesk.public.php' title="Cria um chamado" class='itemP'>Cria um chamado</a> </li> <li id='menu3'><a href='/web/front/ticket.php' title="Chamados" class='itemP'>Chamados</a> </li> <li id='menu4'><a href='/web/front/reservationitem.php' title="Reservas" class='itemP'>Reservas</a> </li> <li id='menu5'><a href='/web/front/helpdesk.faq.php' title="FAQ" class='itemP'>FAQ</a> </li> </ul> 

Ecco il mio javascript

  "<script type='text/javascript'> $(document).ready(function(){ $('#menu2').click(function(event){ event.preventDefault(); alert('Text'); }) }); </script>"; 

Il mio avviso su Chrome

immettere qui la descrizione dell'immagine

Quello che ho cercato di fare per cambiare la parte visiva del mio allarme.

 "<script type='text/javascript'> $(document).ready(function () { $('#menu2').dialog({ e.preventDefault(); }); $('#menu2').click(function () { }); }); </script>"; 

Non posso programmare gli esempi descritti qui nel mio codice php. Così ho pubblicato parte del mio codice where ho il mio script di lavoro. Vi chiedo di utilizzare il codice per le soluzioni descritte qui per migliorare la mia comprensione.

 if (Session::haveRight("ticket", CREATE)) { $menu['create_ticket']['id']= "menu2"; /*My alert of menu2*/ echo "<script type='text/javascript'> $(document).ready(function(){ $('#menu2').click(function(event){ event.preventDefault(); alert('Text'); }) }); </script>"; $menu['create_ticket']['default'] = '/front/helpdesk.public.php?create_ticket=1'; $menu['create_ticket']['title'] = __s('Create a ticket'); $menu['create_ticket']['content'] = arrays(true); } 

Obs: Sto rilasciando lo script ad un'applicazione PHP.

Spero che qualcuno possa aiutarmi ..

Posso programmare l'allarme per un look migliore usando il sweetalert. Ora devo call la function onClick per #menu. Ma non posso andare avanti.

Il mio nuovo script

 echo '<script type="text/javascript">'; echo 'setTimeout(function () { swal("Return the alert test !","Message!","success");'; echo '}, 1000);</script>'; 

Il mio nuovo avviso:

immettere qui la descrizione dell'immagine

Utilizza l'allarme dolce Jquery Plugin per l'allerta altamente personalizzata

Devi avere una comprensione fondamentale su come funziona javascript e cosa stai guardando.

In primo luogo, NON puoi controllare l'aspetto di un avviso. Queste sono funzioni di browser incorporate.

Quindi, per gestire il suo aspetto, siete sulla buona strada per utilizzare qualcosa come jQuery UI Dialog.

Per utilizzare il dialogo jQuery UI ( https://jqueryui.com/dialog ), si chiama .dialog sull'elemento, come .dialog :

 $('#my-dialog').dialog(); 

Nel tuo caso, sospetto che tu voglia usarla come una "conferma modale", quindi leggi questi documenti: https://jqueryui.com/dialog/#modal-confirmation

Per utilizzarlo in questo modo, lo innescherai passando in certi argomenti:

 $( "#my-dialog" ).dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { "Confirm": function() { // ** DO THE THINGS YOU WANT when they confirm "Yes" here. $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); 

Questi argomenti sono nella struttura di un object javascript , con coppie di valore nome-valore di diverse opzioni. Ad esempio, sopra il valore resizable è un nome di opzione e false è il valore. Assicurati di controllare le informazioni API della window di dialogo per conoscere tutte le opzioni, i methods, ecc.

Quindi modifica il codice dalla tua domanda (copiato qui):

 <script type='text/javascript'> $(document).ready(function () { $('#menu2').dialog({ e.preventDefault(); }); $('#menu2').click(function () { }); }); </script> 

Per essere qualcosa di simile:

 <script> jQuery(function ($) { $('#menu2').click(function () { $( "#dialog-confirm" ).dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { "Confirm": function() { // ** DO THE THINGS YOU WANT when they confirm "Yes" here. $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); }); }); </script> 

E assicurati di avere il markup nella tua pagina per supportre questa window di dialogo. Ad esempio, posiziona qualcosa di simile appena prima del </body> chiusura:

 <div id="dialog-confirm" title="Are you sure you want to do this?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>You are about to do something. Are you sure?</p> </div> 

I miei codici sono i codici JavaScript per creare un avviso personalizzato del lato client. Questo è completato:

 <style> #alertContainer { position: fixed; width: 100vw; height: 100vh; z-index: 999; background-color: rgba(0, 0, 0, 0.5); display: none; } #alert { width: 400px; top: 0px; right: 0px; bottom: 0px; left: 0px; position: absolute; margin: auto; background-color: rgb(173, 173, 173); padding: 30px; max-width: 100vw; height: 130px; } #ok { position: absolute; right: 30px; bottom: 30px; } </style> 

Html deve copiare dopo il tag di avvio del corpo:

 <div id="alertContainer"> <div id="alert"> <span id="alertText"> Hello</span> <input id="ok" value="ok" onclick="$('#alertContainer').hide();" type="button"> </div> </div> 

E questa è la function MyAlert per utilizzare insted di avvisi javascript:

  function MyAlert(text) { document.getElementById('alertContainer').style.display = "block"; document.getElementById('alertText').innerHTML = text; } 

e questo è un esempio:

 <a onclick="MyAlert('How are you')">alert</a>