Як створити діалогове вікно з параметрами "так" і "ні"?


658

Я збираюся зробити кнопку, щоб вжити заходів і зберегти дані в базі даних.

Як тільки користувач натискає кнопку, я хочу, щоб у попередженні JavaScript були запропоновані параметри «так» та «скасувати». Якщо користувач вибере «так», дані будуть вставлені в базу даних, інакше жодних дій не буде вжито.

Як відобразити такий діалог?


2
@Szenis Досить мертвий простий і приємний стиль так / ні. Я теж ненавиджу діалоги XUL, тому що заморожує стільки речей. Дуже дякую.
— m3nda

Відповіді:


1246

Ви, ймовірно, шукаєте confirm(), що відображає підказку та повертає trueабо falseна основі того, що вирішив користувач:

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
підтвердження має кнопки OK та CANCEL. Чи можна встановити ці кнопки ТАК / НІ?
— Оуен

16
@Owen No. Спеціалізація говорить, що ви просто повинні надіслати повідомлення. Ви можете імітувати діалог у HTML (хоча він не блокуватиметься як вбудований). jQuery Dialog - хороший приклад реалізації подібних речей.
— s4y

3
Примітка: ви можете помістити returnвсередину в інше, і тоді вам не потрібно загортати весь код у підтвердження! (однак випадок від конкретного випадку)
— Яків Раккуя

21
@JacobRaccuia Або простоif(!confirm('message')) return;
— Аарон

1
@Dimple зараз немає способу налаштувати його. Ось чому деякі веб-сайти використовують користувацькі діалогові вікна, а не власні.
— s4y

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

Використовуйте window.confirmзамість оповіщення. Це найпростіший спосіб досягти цієї функціональності.


15
Ви також можете піти з if(confirm("...")){замість
— Ніколя Bouliane

75

Як це зробити за допомогою "вбудованого" 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>

5
Краще обробляти під час подання події форми: разом із вашим кодом, якщо користувач натискає текст, текст надходить без будь-якого запиту!
— p91paul

1
@ p91paul - Який веб-переглядач не працює для вас? Я просто спробував натиснути клавішу Enter в IE, Chrome і Safari в Windows, і це спрацювало як очікувалося. jsfiddle.net/ALjge/1
— Dana

добре, я був упевнений у тому, що говорив, але не перевіряв і помилявся. вибачте!
— p91paul

1
Немає жодних проблем :) Зазвичай на шкіру кота існує кілька способів. Я просто хотів підтвердити, що мій підхід працює. Використання, <form onsubmit="...">як ви запропонували, теж працює :)
— дата

41

Уникайте вбудованого JavaScript - зміна поведінки означало б редагування кожного примірника коду, і це не дуже!

Набагато чіткішим способом є використання атрибута даних на елементі, наприклад data-confirm="Your message here". Мій код нижче підтримує такі дії, включаючи динамічно генеровані елементи:

  • aі buttonклацання
  • form подає
  • option вибирає

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


2
Дуже чисте рішення, про яке я не думав раніше. Можна бути ще більш стислим:$("[data-confirm]").on('click,submit', function() { /* ... */ })
— Гримаса відчаю

Вибачте, не втримався знову подивитися на це. По-перше: події повинні бути розділені пробілом. Друге: ви все ще можете підтягнути код jsfiddle.net/jguEg ;)
— Гримаса відчаю

@GrimaceofDespair Я оновив код, оскільки натиснувши та підтвердивши, type="button"тоді запитав, чи бажає користувач надіслати форму (тому що ви натискаєте елемент форми), що, очевидно, не сталося після повторного натискання кнопки ОК.
— rybo111

Це хороші приклади, хоча всі вони використовують діалогове вікно підтвердження (), тому ви не можете перейменувати кнопки Скасувати / ОК: |
— rogerdpack

@rogerdpack Так, але красою використання атрибутів даних є те, що ви можете змінити confirm()все, що завгодно, не змінюючи HTML.
— rybo111

22

Вам потрібно створити контрольну підтвердженняBox , змінити кнопки в діалоговому вікні, що відображається функцією підтвердження, неможливо.

Jquery підтвердженняBox


дивіться цей приклад: 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();
}

Телефонуйте за своїм кодом:

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

** Чистий JavaScript підтвердженняBox **


Приклад : 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>

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
Так приємно теж .. досить простий, чистий javascript і не так багато css. Сподобалось: D
— m3nda

Підтвердження поля повинно зникнути після натискання елемента. Також слід використовувати класи, а не ідентифікатори.
— rybo111

@rogerdpack Я оновив скрипку, дайте мені знати, чи потрібно щось з мого боку :)
— Keval Bhatt

@rogerdpack якщо вам подобається відповісти, тоді ви можете голосувати: P
— Кевал Бхатт

@KevalBhatt, мені подобається твоя версія "чистого JS". Чи є спосіб зняти / приховати / будь-який діалог відразу після натискання кнопки? Якщо я поставив, document.getElementById('id_confrmdiv').style.display="none";діалог буде приховано після всіх команд, виконаних у методі для кнопки.
— Андрій Музичук


8

Або просто:

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

1
Дякую! Я побоювався, що мені доведеться включити jQuery до мого простого додатка CRUD просто для того, щоб зробити це просто, ви впевнені, що хочете, щоб видалити це.
— Буде Матсон

7

Ви можете перехопити onSubmitподію з боку JS. Потім зателефонуйте до попередження про підтвердження та отримайте результат.


5

Ще один спосіб зробити це:

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

Це повне чуйне рішення з використанням ванільного 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 надає простий API xdialog.confirm () . Фрагмент коду наведено нижче. Більше демонстрацій можна знайти тут

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>


Ви повинні описати, що ви маєте на увазі під собою // do work here... Виконайте функції для YES TEXTта NO TEXTперейти туди?
— кев

1
@kev, зворотний виклик буде виконано, коли користувач вибере кнопку ОК.
— xia xiongjun

і звідки логіка NO TEXT?
— кев

Ви можете додати oncancelпараметр до останніх параметрів параметрів xdialog.confirm(text, onyes, options). Докладніше див: параметри за замовчуванням xdialog
— 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';       
   }
});

Вибачте, іспанську?
— zixuan
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.