Comment créer une boîte de dialogue avec les options «oui» et «non»?

658

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 a cliqué sur le bouton, je souhaite qu'une alerte JavaScript propose 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 entreprise.

Comment afficher une telle boîte de dialogue?

crchin
la source
2
@Szenis Style assez simple et joli mort oui / non. Je déteste aussi les dialogues XUL car ça gèle tellement de choses. Merci beaucoup.
m3nda

Réponses:

1248

Vous recherchez probablement confirm(), qui affiche une invite et renvoie trueou en falsefonction de ce que l'utilisateur a décidé:

if (confirm('Are you sure you want to save this thing into the database?')) {
  // Save it!
  console.log('Thing was saved to the database.');
} else {
  // Do nothing!
  console.log('Thing was not saved to the database.');
}

s4y
la source
125
confirmer a les boutons OK et CANCEL. Ces boutons peuvent-ils être réglés sur OUI / NON?
Owen
16
@Owen Non. La spécification dit que vous n'avez qu'à fournir un message. Vous pouvez émuler une boîte de dialogue en HTML (bien qu'elle ne se bloque pas comme celle intégrée). La boîte de dialogue jQuery est un bon exemple d'implémentation de ce genre de chose.
s4y
3
note: vous pouvez mettre un returndedans et sinon vous n'avez pas besoin d'envelopper tout votre code dans la confirmation! (correction au cas par cas)
Jacob Raccuia
21
@JacobRaccuia Ou tout simplementif(!confirm('message')) return;
Aaron
1
@Dimple, il n'y a actuellement aucun moyen de le personnaliser. C'est pourquoi certains sites Web utilisent des boîtes de dialogue personnalisées sur la page au lieu de celles natives.
s4y
90
var answer = window.confirm("Save data?")
if (answer) {
    //some code
}
else {
    //some code
}

Utilisez window.confirmau lieu d'alerte. Il s'agit de la manière la plus simple d'obtenir cette fonctionnalité.

Chuck Norris
la source
15
Vous pouvez aussi aller à la if(confirm("...")){place
Nicolas Bouliane
75

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>
dana
la source
5
Il est préférable de gérer un seul envoi du formulaire: avec votre code, si l'utilisateur appuie sur Entrée dans le texte, le formulaire est envoyé sans aucune demande!
p91paul
1
@ p91paul - Pour quel navigateur cela échoue-t-il pour vous? J'ai juste essayé d'appuyer sur Entrée dans IE, Chrome et Safari sous Windows et cela a fonctionné comme prévu. jsfiddle.net/ALjge/1
dana
eh bien, j'étais sûr de ce que je disais, mais je n'ai pas testé et j'avais tort. Désolé!
p91paul
1
Pas de problème :) Il y a généralement plus d'une façon de dépouiller un chat. Je voulais juste confirmer que mon approche fonctionnait. Utiliser le <form onsubmit="...">comme vous l'avez suggéré fonctionne aussi :)
dana
41

Évitez le JavaScript en ligne - changer le comportement signifierait éditer chaque instance du code, et ce n'est pas joli!

Une manière beaucoup plus propre consiste à utiliser un attribut de données sur l'élément, tel que 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:

  • aet buttonclics
  • 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>

Démo JSFiddle

rybo111
la source
2
Solution très propre à laquelle je n'avais pas pensé auparavant. Peut être encore plus concis:$("[data-confirm]").on('click,submit', function() { /* ... */ })
Grimace of Despair
Désolé, je n'ai pas pu résister à le revoir. Premièrement: les événements doivent être séparés par un espace. Deuxièmement: vous pouvez toujours resserrer le code jsfiddle.net/jguEg ;)
Grimace of Despair
@GrimaceofDespair J'ai mis à jour le code, car en cliquant et en confirmant un, j'ai type="button"demandé si l'utilisateur voulait soumettre le formulaire (parce que vous cliquez sur un élément de formulaire), ce qui n'est évidemment pas arrivé après avoir cliqué de nouveau sur OK.
rybo111
Ce sont de bons exemples, bien qu'ils utilisent tous la boîte de dialogue confirm () afin que vous ne puissiez pas renommer les boutons Annuler / OK: |
rogerdpack
@rogerdpack Oui, mais la beauté de l'utilisation des attributs de données est que vous pouvez changer confirm()ce que vous voulez sans changer le HTML.
rybo111
22

Vous devez créer custome confirmBox , il n'est pas possible de modifier les boutons dans la boîte de dialogue affichée par la fonction de confirmation.

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
});

** ConfirmBox JavaScript pur **


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

Keval Bhatt
la source
2
Tellement sympa aussi .. assez simple, pur javascript et pas tellement css. Comme ça: D
m3nda
Confirmez que les cases doivent disparaître une fois qu'un élément est enfoncé. En outre, vous devez utiliser des classes, pas des ID.
rybo111
@rogerdpack J'ai mis à jour le violon pour me faire savoir si j'ai besoin de quelque chose de mon côté :)
Keval Bhatt
@rogerdpack si vous aimez la réponse, vous pouvez voter: P
Keval Bhatt
@KevalBhatt, j'aime votre version 'pure JS'. Existe-t-il un moyen de supprimer / masquer / n'importe quelle boîte de dialogue juste après avoir appuyé sur un bouton? Si je mets document.getElementById('id_confrmdiv').style.display="none";la boîte de dialogue est cachée après toutes les commandes exécutées dans la méthode pour un bouton.
Andrii Muzychuk
13

Ce plugin peut vous aider à confirmer l'utilisation de jquery

$.confirm({
    title: 'Confirm!',
    content: 'Simple confirm!',
    confirm: function(){
        alert('Confirmed!');
    },
    cancel: function(){
        alert('Canceled!')
    }
});
ibrahim ozboluk
la source
8

Ou simplement:

<a href="https://some-link.com/" onclick="return confirm('Are you sure you want to go to that link?');">click me!</a>
JavaRunner
la source
1
Je vous remercie! J'avais peur de devoir inclure jQuery dans ma simple application CRUD juste pour faire une simple opération de suppression, vous êtes sûr de vouloir.
Will Matheson
7

Vous pouvez intercepter l' onSubmitévénement via JS. Appelez ensuite une alerte de confirmation, puis saisissez le résultat.

marcelo-ferraz
la source
5

Une autre façon de procéder:

$("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


   });
Aris
la source
5

Il s'agit d'une solution entièrement réactive utilisant la vanille javascript:

// Call function when show dialog btn is clicked
document.getElementById("btn-show-dialog").onclick = function(){show_dialog()};
var overlayme = document.getElementById("dialog-container");

function show_dialog() {
 /* A function to show the dialog window */
    overlayme.style.display = "block";
}

// If confirm btn is clicked , the function confim() is executed
document.getElementById("confirm").onclick = function(){confirm()};
function confirm() {
 /* code executed if confirm is clicked */   
    overlayme.style.display = "none";
}

// If cancel btn is clicked , the function cancel() is executed
document.getElementById("cancel").onclick = function(){cancel()};
function cancel() {
 /* code executed if cancel is clicked */  
    overlayme.style.display = "none";
}
.popup {
  width: 80%;
  padding: 15px;
  left: 0;
  margin-left: 5%;
  border: 1px solid rgb(1,82,73);
  border-radius: 10px;
  color: rgb(1,82,73);
  background: white;
  position: absolute;
  top: 15%;
  box-shadow: 5px 5px 5px #000;
  z-index: 10001;
  font-weight: 700;
  text-align: center;
}

.overlay {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.85);
  z-index: 10000;
  display :none;
}

@media (min-width: 768px) {
  .popup {
    width: 66.66666666%;
    margin-left: 16.666666%;
  }
}
@media (min-width: 992px) {
  .popup {
    width: 80%;
    margin-left: 25%;
  }
}
@media (min-width: 1200px) {
  .popup {
    width: 33.33333%;
    margin-left: 33.33333%;
  }
}

.dialog-btn {
  background-color:#44B78B;
  color: white;
  font-weight: 700;
  border: 1px solid #44B78B;
  border-radius: 10px;
  height: 30px;
  width: 30%;
}
.dialog-btn:hover {
  background-color:#015249;
  cursor: pointer;
}
<div id="content_1" class="content_dialog">
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
</div>

<button id="btn-show-dialog">Ok</button>


<div class="overlay" id="dialog-container">
  <div class="popup">
    <p>This will be saved. Continue ?</p>
    <div class="text-right">
      <button class="dialog-btn btn-cancel" id="cancel">Cancel</button>
      <button class="dialog-btn btn-primary" id="confirm">Ok</button>
    </div>
  </div>
</div>

Alouani Younes
la source
3

xdialog fournit une API simple xdialog.confirm () . L'extrait de code suit. Plus de démos peuvent être trouvées ici

document.getElementById('test').addEventListener('click', test);

function test() {
  xdialog.confirm('Are you sure?', function() {
    // do work here if ok/yes selected...
    console.info('Done!');
  }, {
    style: 'width:420px;font-size:0.8rem;',
    buttons: {
      ok: 'yes text',
      cancel: 'no text'
    },
    oncancel: function() {
      console.warn('Cancelled!');
    }
  });
}
<link href="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js"></script>
<button id="test">test</button>

xia xiongjun
la source
Tu dois décrire ce que tu veux dire // do work here... Faire les fonctions YES TEXTet NO TEXTy aller?
kev
1
@kev, le rappel sera exécuté lorsque l'utilisateur sélectionnera le bouton ok.
xia xiongjun
et où va la logique NO TEXT?
kev
Vous pouvez ajouter une oncanceloption aux dernières options de paramètre de xdialog.confirm(text, onyes, options). Pour plus de détails, voir: xdialog default-options
xia xiongjun
-2
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';       
   }
});
alpc
la source
Je suis désolé, espagnol?
zixuan