Question Comment créer un dialogue avec les options "oui" et "non"?


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 une alerte JavaScript pour offrir "oui" et "annuler" les options. 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 un tel dialogue?


520
2018-02-17 20:03


origine


Réponses:


Vous cherchez probablement confirm(), 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!
}

984
2018-02-17 20:06



var answer = confirm("Save data?")
if (answer) {
    //some code
}
else {
    //some code
}

Utilisation confirm au lieu d'alerte. C'est la manière la plus simple d'obtenir cette fonctionnalité.


67
2018-02-17 20:06



Comment faire cela en utilisant 'inline' JavaScript:

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

59
2018-02-17 20:06



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

Un moyen 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:

  • a et button 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>

JSFiddle démo


32
2017-08-12 18:20



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


17
2018-05-28 05:46



Ce plugin peut vous aider jquery-confirm facile à utiliser

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

});


9
2017-12-29 09:05



Vous pouvez intercepter le onSubmit événement ising JS. Puis appelez une alerte de confirmation, puis prenez le résultat.


5
2018-02-17 20:06