Hinzufügen von benutzerdefinierten bestätigen Meldungsfeld, jQuery zu markieren Fettschrift funktioniert nicht

Question

Ich weiß, dass Alert und Confirm nicht gestylt werden kann, also habe ich mich umgesehen und ein Beispiel dafür gefunden, wie Sie Ihre eigenen anpassen können. Das Beispiel, das ich gefunden habe, funktioniert online, aber ich konnte es nicht in meiner Anwendung arbeiten. Die Funktion sieht unten wie:

$(function() { 
    $("#dialog-message").showModalDialog({ 
    modal: true, 
    buttons: { 
     Ok: function() { 
     $(this).dialog("close"); 
     } 
    } 
    }); 
}); 

Während die div, der die Nachricht enthalten wie unten aussieht:

<div id="dialog-message" title="Download complete"> 
    <p> 
    <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 
    Your files have downloaded successfully into the My Downloads folder. 
    </p> 
    <p> 
    Currently using <b>36% of your storage space</b>. 
    </p> 
</div> 

Das Problem, dass die Nachricht in meine Seite ausgedruckt und das div wird nicht als Dialog gelesen Box. Was fehlt mir?

Answer 1

Hier gehen Sie mit einer Lösung https://jsfiddle.net/jbzgvzxk/

$(function() { 
 
    $("#dialog-message").dialog({ 
 
    modal: true, 
 
    buttons: { 
 
     Ok: function() { 
 
     $(this).dialog("close"); 
 
     } 
 
    } 
 
    }); 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="dialog-message" title="Download complete"> 
 
    <p> 
 
    <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 
 
    Your files have downloaded successfully into the My Downloads folder. 
 
    </p> 
 
    <p> 
 
    Currently using <b>36% of your storage space</b>. 
 
    </p> 
 
</div>

Meine Vermutung ist Sie jQueryUI verwenden. Anstelle von showModalDialog sollte es dialog sein.

Referenzdokument:https://jqueryui.com/dialog/#modal-confirmation

Bitte überprüfen Sie die Bibliothek & es ist, um auch in der Lösung zu verknüpfen.

Hoffe, das wird Ihnen helfen.

Answer 2

dieses arbeitet

Fein Sie müssen diesen Code in Java-Script

$(document).ready(function(){ 
$("#dialog-message").dialog({ 
    dialogClass: "no-close", 
    buttons: [ 
    { 
     text: "OK", 
     click: function() { 
     $(this).dialog("close"); 
     } 
    } 
    ] 
}); 

}); 

Sie müssen

1. https://code.jquery.com/jquery-1.11.3.js // JQuery auf die Seite diese 3-Dateien importieren
stellen Sie sicher,
2. https://code.jquery.com/ui/jquery-ui-git.js // Jquery UI
3. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css // jquery ui CSS