So erstellen Sie einen Dialog mit den Optionen „Ok“ und „Abbrechen“.

Ich werde eine Schaltfläche erstellen, um eine Aktion auszuführen und die Daten in einer Datenbank zu speichern.

Sobald der Benutzer auf die Schaltfläche klickt, möchte ich, dass eine JavaScript-Warnung die Optionen „Ja“ und „Abbrechen“ anbietet. Wenn der Benutzer „Ja“ auswählt, werden die Daten in die Datenbank eingefügt, andernfalls wird keine Aktion ausgeführt.

Wie zeige ich einen solchen Dialog an?

Sie suchen wahrscheinlich confirm()die eine Eingabeaufforderung anzeigt und zurückkehrt true oder false basierend auf der Entscheidung des Benutzers:

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

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

Benutzen window.confirm statt Alarm. Dies ist der einfachste Weg, um diese Funktionalität zu erreichen.

So machen Sie das mit ‘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>

Vermeiden Sie Inline-JavaScript – Eine Änderung des Verhaltens würde bedeuten, jede Instanz des Codes zu bearbeiten, und das ist nicht schön!

Ein viel saubererer Weg ist die Verwendung eines Datenattributs für das Element, z data-confirm="Your message here". Mein Code unten unterstützt die folgenden Aktionen, einschließlich dynamisch generierter Elemente:

• a und button Klicks
• form einreicht
• option wählt

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

Sie müssen eine benutzerdefinierte erstellen bestätigenBox. Es ist nicht möglich, die Schaltflächen in dem von der Bestätigungsfunktion angezeigten Dialog zu ändern.

jQuery bestätigenBox

Siehe dieses Beispiel: 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();
}

Nennen Sie es mit Ihrem Code:

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // Do nothing
});

Reine JavaScript-Bestätigungsbox

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

Skript

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

Dieses Plugin kann Ihnen dabei helfen jquery-confirm Einfach zu verwenden

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

Oder einfach:

<a href="https://some-link.com/" onclick="return confirm('Are you sure you want to go to that link?');">click me!</a>