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


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.