Je suis un débutant avec JQuery et je ne sais pas comment procéder à mon projet. Ce que je veux faire, c'est créer une boîte de dialogue avec deux boutons OK et Annuler qui apparaîtrait après avoir cliqué sur un lien. J'ai un exemple de travail pleinement, mais le problème avec c'est que je n'aime pas la boîte de dialogue (exemple A). J'ai aussi une belle boîte de dialogue (exemple B), mais je ne sais pas comment l'intégrer avec un lien. Quelqu'un peut-il m'aider avec ceci s'il vous plaît?
Voici l'exemple de code A - Travailler complètement mais pas bien: ( p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Usuwanie produktu</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
window.location.href = "glowny.php?akcja=produkty";
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Usuwanie produktu">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Wybrany produkt został pomyślnie usunięty z bazy danych.
</p>
<p>
Naciśnij OK aby kontynuować.
</p>
</div>
</body>
</html>
3 Réponses :
Essayez ceci
p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Usuwanie produktu</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
</head>
<body>
<div id="dialog-message" title="Usuwanie produktu">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Wybrany produkt został pomyślnie usunięty z bazy danych.
</p>
<p>
Naciśnij OK aby kontynuować.
</p>
</div>
<a href="delete.php?id=22" class="confirmation">Link</a>
<script type="text/javascript">
</script>
</body>
</html>J'ai copié le code HTML et mettez le code JQuery dans la partie de script - et cela fonctionne en partie, je veux dire que la boîte de dialogue se présente, mais il n'y a aucun message là-bas. Lorsque j'ajoute des messages à la partie HTML, la boîte de dialogue est apparue comme prévu avec son contenu, mais le même contenu est apparu sur la page. C'est un problème. Je ne sais pas comment le résoudre.
Ça a l'air vraiment génial! Ça marche. Exactement ce dont j'avais besoin. Merci.
Si cela vous a aidé à utiliser et marquez-le aussi correct pour que cela puisse aider les autres aussi.
Vous étiez près de votre objectif. Votre boîte de dialogue dans l'exemple B, Besoin d'une propriété Autoopen définie sur False. Il bloquera la boîte de dialogue pour s'ouvrir lorsque la charge de document.
Pour faire comme l'exemple A, déclenchez l'ouverture modale. Créez simplement un événement en cliquant sur l'élément. P>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Usuwanie produktu</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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-message").dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function() {
$(this).dialog("close");
window.location.href = "glowny.php?akcja=produkty";
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#link").click(function() {
$("#dialog-message").dialog("open");
})
});
</script>
</head>
<body>
<p id="link"> click on me to open</p>
<div id="dialog-message" title="Usuwanie produktu">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> Wybrany produkt został pomyślnie usunięty z bazy danych.
</p>
<p>
Naciśnij OK aby kontynuować.
</p>
</div>
</body>
</html>
J'ai copié le code mais je n'ai pas reçu de lien qui fonctionne. La boîte de dialogue n'est pas non plus venue.
Ouvrez l'outil de développement en appuyant sur F12. Avez-vous un message d'erreur dans l'onglet Console? Je me coupe la pâte et essayer divers navigateur (Chrom, Ie, Firefox) et, de mon côté, je n'avais aucun problème.
La solution fournie par Ashay Mandwarya fonctionne bien pour moi. Voici le code:
<!DOCTYPE html> <html>
<head> <meta charset="utf-8" /> <title>Usuwanie produktu</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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> </head>
<body> <div id="dialog-message" title="Usuwanie produktu">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Wybrany produkt został pomyślnie usunięty z bazy danych.
</p>
<p>
Naciśnij OK aby kontynuować.
</p> </div>
<a href="delete.php?id=22" class="confirmation">Link</a>
<script type="text/javascript">
$("#dialog-message").hide();
$('.confirmation').on('click', function(e) {
e.preventDefault();
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
window.location.href = "glowny.php?akcja=produkty";
},
Cancel: function() {
$(this).dialog("close");
}
}
}); });
</script>
</body>
</html>