javascript - Hur man skapar en dialog med "Ok" och "Avbryt" alternativ

Jag ska göra en knapp för att utföra en åtgärd och spara datan i en databas.

När användaren klickar på knappen vill jag att ett JavaScript-meddelande ska erbjuda alternativen "ja" och "avbryt". Om användaren väljer "ja" kommer data att införas i databasen, annars vidtas ingen åtgärd.

Hur visar jag ett sådant dialogfönster?

Svar #1

Du letar förmodligen efter confirm(), som visar en uppmaning och returnerar true eller false beroende på vad användaren beslutade:

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

Svar #2

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

Använd window.confirm istället för alert. Detta är det enklaste sättet att uppnå den funktionen.

Svar #3

Hur man gör detta med '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>

Svar #4

Undvik inbäddad JavaScript - att ändra beteendet skulle innebära att redigera varje instans av koden, och det är inte snyggt!

Ett mycket renare sätt är att använda ett data-attribut på elementet, till exempel data-confirm="Ditt meddelande här". Min kod nedan stöder följande åtgärder, inklusive dynamiskt genererade element:

  • a och button-klick
  • formulär skickar
  • option väljer

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

Svar #5

Du måste skapa en anpassad confirmBox. Det är inte möjligt att ändra knapparna i dialogrutan som visas av confirm-funktionen.

jQuery confirmBox

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

doConfirm("Are you sure?", function yes()
{
    alert('Yes');
}, function no()
{
    alert('No');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

Ren JavaScript confirmBox

    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;
        };
    }
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;
}
<div id="id_confrmdiv">confirmation
    <button id="id_truebtn">Yes</button>
    <button id="id_falsebtn">No</button>
</div>

<button onclick="doSomething()">submit</button>

Svar #6

Eller helt enkelt:

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

Svar #7

Denna plugin kan hjälpa dig jquery-confirm lätt att använda

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

Relaterade artiklar