Làm thế nào để tạo một hộp thoại với các tùy chọn có đúng và có không?


657

Tôi sẽ tạo một nút để thực hiện một hành động và lưu dữ liệu vào cơ sở dữ liệu.

Khi người dùng nhấp vào nút, tôi muốn có một cảnh báo JavaScript để cung cấp các tùy chọn có thể có Nếu người dùng chọn có, có đúng, dữ liệu sẽ được chèn vào cơ sở dữ liệu, nếu không sẽ không có hành động nào được thực hiện.

Làm thế nào để tôi hiển thị một hộp thoại như vậy?


2
@Szenis Kiểu chết khá đơn giản và đẹp có / không. Tôi ghét các hộp thoại XUL vì đóng băng quá nhiều thứ. Cảm ơn bạn rất nhiều.
m3nda

Câu trả lời:


1245

Bạn có thể đang tìm kiếm confirm(), hiển thị lời nhắc và trả về truehoặc falsedựa trên những gì người dùng đã quyết định:

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
xác nhận có nút OK và CANCEL. Các nút này có thể được đặt thành CÓ / KHÔNG?
Owen

16
@Owen Không. Thông số kỹ thuật nói rằng bạn chỉ cần cung cấp một tin nhắn. Bạn có thể mô phỏng một hộp thoại trong HTML (mặc dù nó sẽ không chặn như hộp thoại tích hợp). Hộp thoại jQuery là một ví dụ tốt về việc triển khai loại điều này.
s4y

3
lưu ý: bạn có thể đặt một returnbên trong khác và sau đó bạn không cần phải bọc tất cả mã của mình trong xác nhận! (theo từng trường hợp sửa chữa)
Jacob Raccuia

21
@JacobRaccuia Hoặc đơn giảnif(!confirm('message')) return;
Aaron

1
@Dimple không có cách nào để tùy chỉnh nó, hiện tại. Đó là lý do tại sao một số trang web sử dụng hộp thoại tùy chỉnh, trong trang thay vì trang gốc.
s4y 18/03/2016

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

Sử dụng window.confirmthay vì cảnh báo. Đây là cách dễ nhất để đạt được chức năng đó.


15
if(confirm("...")){Thay vào đó, bạn cũng có thể đi cùng
Nicolas Bouliane

75

Cách thực hiện việc này bằng cách sử dụng JavaScript 'nội tuyến':

<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
Tốt hơn là xử lý sự kiện onsubmit của biểu mẫu: với mã của bạn, nếu người dùng nhấn vào văn bản, biểu mẫu sẽ được gửi mà không có bất kỳ yêu cầu nào!
p91paul

1
@ p91paul - Trình duyệt nào thất bại với bạn? Tôi vừa thử nhấn enter trong IE, Chrome và Safari trên Windows và nó hoạt động như mong đợi. jsfiddle.net/ALjge/1
dana

tốt, tôi chắc chắn về những gì tôi đã nói, nhưng tôi đã không kiểm tra và tôi đã sai. lấy làm tiếc!
p91paul

1
Không có vấn đề gì :) Thường có nhiều hơn một cách để lột da một con mèo. Tôi chỉ muốn xác nhận cách tiếp cận của tôi đã làm việc. Sử dụng <form onsubmit="...">như bạn đề xuất cũng hoạt động :)
dana

41

Tránh JavaScript nội tuyến - thay đổi hành vi có nghĩa là chỉnh sửa mọi phiên bản của mã và nó không đẹp!

Một cách sạch hơn nhiều là sử dụng một thuộc tính dữ liệu trên phần tử, chẳng hạn như data-confirm="Your message here". Mã của tôi dưới đây hỗ trợ các hành động sau, bao gồm các yếu tố được tạo động:

  • abuttonnhấp chuột
  • form nộp
  • option chọn

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>

Bản demo của JSFiddle


2
Giải pháp rất sạch tôi chưa từng nghĩ đến trước đây. Thậm chí có thể ngắn gọn hơn:$("[data-confirm]").on('click,submit', function() { /* ... */ })
Nỗi sợ hãi tuyệt vọng

Xin lỗi, không thể cưỡng lại việc nhìn lại nó. Đầu tiên: các sự kiện nên được phân tách bằng một khoảng trắng. Thứ hai: bạn vẫn có thể thắt chặt mã jsfiddle.net/jguEg ;)
tuyệt vọng

@GrimaceofDespair Tôi đã cập nhật mã, vì nhấp và xác nhận type="button"sau đó hỏi xem người dùng có muốn gửi biểu mẫu không (vì bạn đang nhấp vào một yếu tố biểu mẫu), điều này rõ ràng không xảy ra sau khi nhấp lại OK.
rybo111

Đây là những ví dụ hay, mặc dù tất cả đều sử dụng hộp thoại xác nhận () để bạn không thể đổi tên các nút Hủy / OK: |
rogerdpack

@rogerdpack Có, nhưng vẻ đẹp của việc sử dụng các thuộc tính dữ liệu là bạn có thể thay đổi confirm()thành bất cứ điều gì bạn muốn mà không cần thay đổi HTML.
rybo111

22

Bạn phải tạo custome confirmBox , nó không phải là có thể thay đổi các nút trong hộp thoại hiển thị bởi các chức năng xác nhận.

Jquery ConfirmBox


xem ví dụ này: 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();
}

Gọi nó bằng mã của bạn:

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

** Xác nhận JavaScript thuần **


Ví dụ : 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>

Kịch bản :

<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
Quá đẹp quá .. khá đơn giản, javascript thuần túy và không quá nhiều css. Thích nó: D
m3nda

Hộp xác nhận sẽ biến mất sau khi một mục được nhấn. Ngoài ra, bạn nên sử dụng các lớp, không phải ID.
rybo111

@rogerdpack Tôi đã cập nhật fiddle cho tôi biết nếu cần bất cứ điều gì từ phía tôi :)
Keval Bhatt

@rogerdpack nếu bạn thích câu trả lời thì bạn có thể bỏ phiếu: P
Keval Bhatt

@KevalBhatt, tôi thích phiên bản 'thuần JS' của bạn. Có cách nào để loại bỏ / ẩn / bất kỳ hộp thoại nào ngay sau khi nhấn nút không? Nếu tôi đặt document.getElementById('id_confrmdiv').style.display="none";hộp thoại bị ẩn sau khi tất cả các lệnh được thực thi trong phương thức cho một nút.
Andrii Muzychuk

13

Plugin này có thể giúp bạn xác nhận dễ sử dụng

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

8

Hoặc đơn giản:

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

1
Cảm ơn bạn! Tôi e rằng tôi phải đưa jQuery vào ứng dụng CRUD đơn giản của mình chỉ để thực hiện một thao tác đơn giản là bạn chắc chắn-bạn-muốn-xóa điều này.
Will Matheson

7

Bạn có thể chặn onSubmitsự kiện đang diễn ra JS. Sau đó gọi một cảnh báo xác nhận và sau đó lấy kết quả.


5

Một cách khác để làm điều này:

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

Đây là một giải pháp đáp ứng đầy đủ bằng cách sử dụng javilla 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 cung cấp một API đơn giản xdialog.confirm () . Đoạn mã đang theo sau. Nhiều bản demo có thể được tìm thấy ở đây

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>


Bạn phải mô tả những gì bạn có nghĩa là // do work here... Làm các chức năng cho YES TEXTNO TEXTđi đến đó?
kev

1
@kev, cuộc gọi lại sẽ được thực thi khi người dùng chọn nút ok.
xia xiongjun

và logic để NO TEXTđi đâu?
kev

Bạn có thể thêm một oncanceltùy chọn cho các tùy chọn tham số cuối cùng của xdialog.confirm(text, onyes, options). Để biết thêm chi tiết, xem: xdialog default-Tùy chọn
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';       
   }
});

Tôi xin lỗi, tiếng Tây Ban Nha?
zixuan
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.