Ajout de la boîte de message de confirmation personnalisée, jQuery pour mettre en surbrillance la police en gras ne fonctionne pas

Question

Je sais que Alerte et Confirmer ne peut pas être stylé, alors j'ai regardé autour et trouvé un exemple de la façon de personnaliser le vôtre. Cependant, l'exemple que j'ai trouvé fonctionne en ligne, mais je ne pouvais pas le faire fonctionner dans mon application. La fonction ressemble ci-dessous:

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

Alors que la div contenant le message ressemble ci-dessous:

<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> 

Le problème que le message imprimé dans ma page et la div ne se lit pas comme une boîte de dialogue boîte. Qu'est-ce qui me manque?

Answer 1

Ici, vous allez avec une solution 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>

Je suppose que vous est utilisez jQueryUI. Au lieu de showModalDialog, il devrait être dialog.

Document de référence:https://jqueryui.com/dialog/#modal-confirmation

S'il vous plaît vérifier la bibliothèque & c'est ordre de liaison dans la solution ainsi.

J'espère que cela vous aidera.

Answer 2

celui-ci fonctionne bien

vous avez besoin de ce code java script

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

}); 

vous devez vous assurer d'importer ces 3 fichiers à la page

1. https://code.jquery.com/jquery-1.11.3.js // Jquery
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