Hoe maak je een dialoog aan met ja en nee opties

Ik ga een knop maken om een ​​actie uit te voeren en de gegevens in een database op te slaan.

Zodra de gebruiker op de knop klikt, wil ik een JavaScript-waarschuwing met de opties ‘ja’ en ‘annuleren’. Als de gebruiker ‘ja’ selecteert, worden de gegevens in de database ingevoegd, anders wordt er geen actie ondernomen.

Hoe geef ik zo’n dialoogvenster weer?


Antwoord 1, autoriteit 100%

U zoekt waarschijnlijk naar confirm(), die een prompt weergeeft en trueof falseretourneert op basis van wat de gebruiker heeft besloten:

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

Antwoord 2, autoriteit 7%

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

Gebruik window.confirmin plaats van alert. Dit is de gemakkelijkste manier om die functionaliteit te bereiken.


Antwoord 3, autoriteit 6%

Hoe u dit doet met ‘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>

Antwoord 4, autoriteit 3%

Vermijd inline JavaScript– het veranderen van het gedrag zou betekenen dat je elke instantie van de code moet bewerken, en dat is niet mooi!

Een veel schonere manier is om een ​​data-attribuut voor het element te gebruiken, zoals data-confirm="Your message here". Mijn onderstaande code ondersteunt de volgende acties, inclusief dynamisch gegenereerde elementen:

  • aen buttonklikken
  • formverzendt
  • optionselecteert

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


Antwoord 5, autoriteit 2%

U moet een aangepaste confirmBoxmaken. Het is niet mogelijk om de knoppen in het dialoogvenster dat wordt weergegeven door de bevestigingsfunctie te wijzigen.

jQuery confirmBox


Zie dit voorbeeld: 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();
}

Noem het bij uw code:

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

Pure JavaScript confirmBox


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

Antwoord 6

Deze plug-in kan u helpen jquery-confirmgebruiksvriendelijk

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

Antwoord 7

Of gewoon:

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

Antwoord 8

Je kunt de gebeurtenis onSubmitonderscheppen met JavaScript.

Bel vervolgens een bevestigingsmelding en pak het resultaat.


Antwoord 9

Dit is een volledig responsieve oplossing die gebruik maakt van vanilla 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>

Antwoord 10

Een andere manier om dit te doen:

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

Antwoord 11

xdialogbiedt een eenvoudige API xdialog.confirm( ). Codefragment volgt. Meer demo’s zijn hier

te vinden

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>

Antwoord 12

Supereenvoudig gemaakt, kleine vanilla js-bevestigingsdialoog met Ja en Nee-knoppen.
Het is jammer dat we de native niet kunnen aanpassen.

https://www.npmjs.com/package/yesno-dialog.

voer hier de afbeeldingsbeschrijving in


Antwoord 13

De gemakkelijkste manier om te vragen voordat actie op klik wordt uitgevoerd, is door te volgen

<a onclick="return askyesno('Delete this record?');" href="example.php?act=del&del_cs_id=<?php echo $oid; ?>">
<button class="btn btn-md btn-danger">Delete </button>
</a>

Antwoord 14

document.getElementById("button").addEventListener("click", function(e) {
   var cevap = window.confirm("Sat?n almak istediginizden emin misiniz?");
   if (cevap) {
     location.href='Http://www.evdenevenakliyat.net.tr';       
   }
});

Other episodes