Comment créer une boîte de dialogue avec "oui" et "non" options?
Je vais créer un bouton pour effectuer une action et enregistrer les données dans une base de données.
Une fois que l'utilisateur clique sur le bouton, je veux qu'une alerte JavaScript offre des options "oui" et "annuler". Si l'utilisateur sélectionne "oui", les données seront insérées dans la base de données, sinon aucune action ne sera prise.
Comment afficher une telle boîte de dialogue?
10 answers
Vous cherchez probablementconfirm()
, qui affiche une invite et renvoie true
ou false
en fonction de ce que l'utilisateur a décidé:
if (confirm('Are you sure you want to save this thing into the database?')) {
// Save it!
} else {
// Do nothing!
}
var answer = confirm("Save data?")
if (answer) {
//some code
}
else {
//some code
}
Utilisez confirm
au lieu de alert. C'est le moyen le plus simple d'atteindre cette fonctionnalité.
Comment faire cela en utilisant JavaScript 'inline':
<form action="http://www.google.com/search">
<input type="text" name="q" />
<input type="submit" value="Go"
onclick="return confirm('Are you sure you want to search Google?')"
/>
</form>
Évitez JavaScript en ligne - changer le comportement signifierait modifier chaque instance du code, et ce n'est pas joli!
Beaucoup plus propre est d'utiliser un attribut de données sur l'élément, comme data-confirm="Your message here"
. Mon code ci-dessous prend en charge les actions suivantes, y compris les éléments générés dynamiquement:
-
a
etbutton
clics -
form
soumet -
option
sélectionne
JQuery:
$(document).on('click', ':not(form)[data-confirm]', function(e){
if(!confirm($(this).data('confirm'))){
e.stopImmediatePropagation();
e.preventDefault();
}
});
$(document).on('submit', 'form[data-confirm]', function(e){
if(!confirm($(this).data('confirm'))){
e.stopImmediatePropagation();
e.preventDefault();
}
});
$(document).on('input', 'select', function(e){
var msg = $(this).children('option:selected').data('confirm');
if(msg != undefined && !confirm(msg)){
$(this)[0].selectedIndex = 0;
}
});
HTML:
<!-- hyperlink example -->
<a href="http://www.example.com" data-confirm="Are you sure you want to load this URL?">Anchor</a>
<!-- button example -->
<button type="button" data-confirm="Are you sure you want to click the button?">Button</button>
<!-- form example -->
<form action="http://www.example.com" data-confirm="Are you sure you want to submit the form?">
<button type="submit">Submit</button>
</form>
<!-- select option example -->
<select>
<option>Select an option:</option>
<option data-confirm="Are you want to select this option?">Here</option>
</select>
Vous devez créer custome confirmBox, il n'est pas possible de changer les boutons dans la boîte de dialogue affichée par la fonction confirmer.
Jquery confirmBox
Voir cet exemple: https://jsfiddle.net/kevalbhatt18/6uauqLn6/
<div id="confirmBox">
<div class="message"></div>
<span class="yes">Yes</span>
<span class="no">No</span>
</div>
function doConfirm(msg, yesFn, noFn)
{
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no").unbind().click(function()
{
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.show();
}
Appelez-le par votre code:
doConfirm("Are you sure?", function yes()
{
form.submit();
}, function no()
{
// do nothing
});
** Pur JavaScript Confirm * *
Exemple: http://jsfiddle.net/kevalbhatt18/qwkzw3rg/127/
<div id="id_confrmdiv">confirmation <button id="id_truebtn">Yes</button> <button id="id_falsebtn">No</button> </div> <button onclick="doSomething()">submit</button>
Script:
<script>
function doSomething(){
document.getElementById('id_confrmdiv').style.display="block"; //this is the replace of this line
document.getElementById('id_truebtn').onclick = function(){
//do your delete operation
alert('true');
};
document.getElementById('id_falsebtn').onclick = function(){
alert('false');
return false;
};
}
</script>
CSS:
body { font-family: sans-serif; }
#id_confrmdiv
{
display: none;
background-color: #eee;
border-radius: 5px;
border: 1px solid #aaa;
position: fixed;
width: 300px;
left: 50%;
margin-left: -150px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#id_confrmdiv button {
background-color: #ccc;
display: inline-block;
border-radius: 3px;
border: 1px solid #aaa;
padding: 2px;
text-align: center;
width: 80px;
cursor: pointer;
}
#id_confrmdiv .button:hover
{
background-color: #ddd;
}
#confirmBox .message
{
text-align: left;
margin-bottom: 8px;
}
Ce plugin peut vous aider à jquery-confirmer facile à utiliser
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
confirm: function(){
alert('Confirmed!');
},
cancel: function(){
alert('Canceled!')
}
});
Vous pouvez intercepter l'événement onSubmit
ising JS.
Appelez ensuite une alerte de confirmation, puis récupérez le résultat.
Une autre façon de le faire:
$("input[name='savedata']").click(function(e){
var r = confirm("Are you sure you want to save now?");
//cancel clicked : stop button default action
if (r === false) {
return false;
}
//action continues, saves in database, no need for more code
});
Ou simplement:
<a href="https://some-link.com/" onclick="return confirm('Are you agree to go to that link?');">click me!</a>
document.getElementById("button").addEventListener("click", function(e) {
var cevap = window.confirm("Satın almak istediğinizden emin misiniz?");
if (cevap) {
location.href='Http://www.evdenevenakliyat.net.tr';
}
});