Bagaimana cara membuat dialog dengan opsi “ya” dan “tidak”?


658

Saya akan membuat tombol untuk mengambil tindakan dan menyimpan data ke dalam basis data.

Setelah pengguna mengklik tombol, saya ingin peringatan JavaScript untuk menawarkan opsi "ya" dan "membatalkan". Jika pengguna memilih "ya", data akan dimasukkan ke dalam basis data, jika tidak, tidak ada tindakan yang akan diambil.

Bagaimana cara menampilkan dialog seperti itu?


2
@Szenis Gaya sederhana dan bagus ya / tidak. Saya juga benci dialog XUL karena membekukan banyak hal. Terima kasih banyak.
m3nda

Jawaban:


1246

Anda mungkin mencari confirm(), yang menampilkan prompt dan mengembalikan trueatau falseberdasarkan apa yang diputuskan pengguna:

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


125
konfirmasi memiliki tombol OK dan BATAL. Bisakah tombol ini disetel ke YA / TIDAK?
Owen

16
@ No. Tidak . Spesifikasi mengatakan bahwa Anda baru saja dapat memberikan pesan. Anda dapat meniru dialog dalam HTML (meskipun tidak akan memblokir seperti yang ada di dalamnya). Dialog jQuery adalah contoh yang baik untuk menerapkan hal semacam ini.
s4y

3
Catatan: Anda dapat memasukkan bagian returndalam yang lain dan kemudian Anda tidak perlu membungkus semua kode Anda di konfirmasi! (perbaikan kasus per kasus)
Jacob Raccuia

21
@JacobRaccuia Atau hanyaif(!confirm('message')) return;
Aaron

1
@ Sederhana tidak ada cara untuk menyesuaikannya, saat ini. Itulah sebabnya beberapa situs web menggunakan dialog kustom di dalam halaman alih-alih yang asli.
s4y

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

Gunakan window.confirmsebagai ganti waspada. Ini adalah cara termudah untuk mencapai fungsi itu.


15
Anda juga bisa pergi dengan if(confirm("...")){sebaliknya
Nicolas Bouliane

75

Cara melakukan ini menggunakan 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>

5
Lebih baik menangani acara pengiriman formulir: dengan kode Anda, jika pengguna menekan memasukkan teks, formulir akan dikirimkan tanpa permintaan apa pun!
p91paul

1
@ p91paul - Browser mana yang gagal untuk Anda? Saya baru saja mencoba menekan enter di IE, Chrome, dan Safari di Windows dan itu berfungsi seperti yang diharapkan. jsfiddle.net/ALjge/1
dana

baik, saya yakin apa yang saya katakan, tetapi saya belum menguji dan saya salah. Maaf!
p91paul

1
Tidak masalah :) Biasanya ada lebih dari satu cara untuk menguliti kucing. Saya hanya ingin memastikan bahwa pendekatan saya berhasil. Menggunakan <form onsubmit="...">seperti yang Anda sarankan bekerja juga :)
dana

41

Hindari inline JavaScript - mengubah perilaku berarti mengedit setiap instance kode, dan itu tidak cantik!

Cara yang jauh lebih bersih adalah dengan menggunakan atribut data pada elemen, seperti data-confirm="Your message here". Kode saya di bawah mendukung tindakan berikut, termasuk elemen yang dihasilkan secara dinamis:

  • adan buttonklik
  • form mengirimkan
  • option memilih

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>

Demo JSFiddle


2
Solusi yang sangat bersih yang belum pernah saya pikirkan sebelumnya. Bahkan bisa lebih ringkas:$("[data-confirm]").on('click,submit', function() { /* ... */ })
Meringis dari Keputusasaan

Maaf, tidak tahan untuk tidak melihatnya lagi. Pertama: peristiwa harus dipisahkan oleh spasi. Kedua: Anda masih dapat mengencangkan kode jsfiddle.net/jguEg ;)
Grimace of Despair

@GrimaceofDespair Saya telah memperbarui kode, karena mengklik dan mengonfirmasi type="button"lalu bertanya apakah pengguna ingin mengirimkan formulir (karena Anda mengklik elemen formulir), yang jelas tidak terjadi setelah mengklik OK lagi.
rybo111

Ini adalah contoh yang baik, meskipun semuanya menggunakan dialog confirm () sehingga Anda tidak dapat mengganti nama tombol Cancel / OK: |
rogerdpack

@rogerdpack Ya, tetapi keindahan menggunakan atribut data adalah Anda dapat mengubah confirm()apa pun yang Anda inginkan tanpa mengubah HTML.
rybo111

22

Anda harus membuat custome confirmBox , tidak mungkin untuk mengubah tombol dalam dialog yang ditampilkan oleh fungsi konfirmasi.

Kotak konfirmasi Jquery


lihat contoh ini: 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();
}

Sebut dengan kode Anda:

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

** Kotak konfirmasi JavaScript murni **


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

Skrip :

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


2
Enak juga .. cukup sederhana, javascript murni dan tidak banyak css. Menyukainya: D
m3nda

Kotak konfirmasi akan hilang begitu item ditekan. Selain itu, Anda harus menggunakan kelas, bukan ID.
rybo111

@rogerdpack Saya memperbarui biola, beri tahu saya jika perlu sesuatu dari sisi saya :)
Keval Bhatt

@rogerdpack jika Anda Suka menjawab maka Anda dapat memilih: P
Keval Bhatt

@KevalBhatt, saya suka versi 'JS murni' Anda. Apakah ada cara untuk menghapus / menyembunyikan / dialog apa pun setelah menekan tombol? Jika saya meletakkan document.getElementById('id_confrmdiv').style.display="none";dialog disembunyikan setelah semua perintah dieksekusi dalam metode untuk tombol.
Andrii Muzychuk

13

Plugin ini dapat membantu Anda mengkonfirmasi jquery mudah digunakan

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

8

Atau sederhananya:

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

1
Terima kasih! Saya takut saya harus memasukkan jQuery di aplikasi CRUD sederhana saya hanya untuk melakukan yang sederhana, apakah Anda yakin ingin menghapus ini.
Will Matheson

7

Anda dapat mencegat onSubmitacara ising JS. Kemudian panggil peringatan konfirmasi dan kemudian ambil hasilnya.


5

Cara lain untuk melakukan ini:

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


   });

5

Ini solusi responsif penuh menggunakan 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>


3

xdialog menyediakan API sederhana xdialog.confirm () . Cuplikan kode mengikuti. Demo lainnya dapat ditemukan di sini

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>


Anda harus menjelaskan apa yang Anda maksud dengan // do work here... Apakah fungsi untuk YES TEXTdan NO TEXTpergi ke sana?
kev

1
@ kev, panggilan balik akan dieksekusi ketika pengguna memilih tombol ok.
xia xiongjun

dan di mana logika untuk NO TEXTpergi?
kev

Anda dapat menambahkan oncancelopsi ke opsi parameter terakhir dari xdialog.confirm(text, onyes, options). Untuk lebih jelasnya lihat: 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';       
   }
});

Maaf, Spanyol?
zixuan
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.