如何创建带有“确定”和“取消”选项的对话框

您可能正在寻找 confirm()，它会根据用户的决定显示提示并返回 true 或 false：

if (confirm('Are you sure you want to save this thing into the database?')) { // 保存！ console.log('东西已保存到数据库中。'); } else { // 什么都不做！ console.log('没有保存到数据库中。'); }

---

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

使用 window.confirm 代替警报。这是实现该功能的最简单方法。

---

如何使用“内联”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>

---

避免内联 JavaScript - 改变行为意味着编辑代码的每个实例，而且它并不漂亮！

更简洁的方法是在元素上使用数据属性，例如 data-confirm="Your message here"。我下面的代码支持以下操作，包括动态生成的元素：

a 和按钮点击

表单提交

选项选择

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

---

您必须创建一个自定义确认框。无法更改确认功能显示的对话框中的按钮。

jQuery 确认框

请参阅此示例：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 确认框

示例：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;
}

---

或者简单地说：

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

---

这个插件可以帮助您jquery-confirm易于使用

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

---

您可以使用 JavaScript 拦截 onSubmit 事件。

然后调用确认警报，然后获取结果。

---

这是一个使用 vanilla javascript 的完整响应式解决方案：

// 点击显示对话框 btn 时调用函数 document.getElementById("btn-show-dialog").onclick = function(){show_dialog()}; var overlayme = document.getElementById("dialog-container"); function show_dialog() { /* 显示对话窗口的函数 */ overlayme.style.display = "block"; } // 如果点击了确认btn，则执行函数confim() document.getElementById("confirm").onclick = function(){confirm()}; function confirm() { /* 点击确认时执行的代码 */ overlayme.style.display = "none"; } // 如果点击取消btn，则执行函数cancel() document.getElementById("cancel").onclick = function(){cancel()}; function cancel() { /* 单击取消时执行的代码 */ overlayme.style.display = "none"; } .popup { 宽度：80%;填充：15px；左：0；左边距：5%；边框：1px 纯色 rgb(1,82,73);边框半径：10px；颜色：RGB（1,82,73）；背景：白色；位置：绝对；最高：15%；盒子阴影：5px 5px 5px #000; z-索引：10001；字体粗细：700；文本对齐：居中； } .overlay { 位置：固定；宽度：100%；顶部：0；左：0；右：0；底部：0；背景：rgba(0,0,0,.85); z 指数：10000；显示：无； } @media (min-width: 768px) { .popup { 宽度: 66.66666666%;左边距：16.666666%； } } @media (min-width: 992px) { .popup { 宽度: 80%;左边距：25%； } } @media (min-width: 1200px) { .popup { 宽度: 33.33333%;左边距：33.33333%； } } .dialog-btn { 背景色：#44B78B;白颜色;字体粗细：700；边框：1px 实心#44B78B；边框半径：10px；高度：30px；宽度：30%； } .dialog-btn:hover { 背景色:#015249;光标：指针； }

Ok

---

另一种方法：

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


   });

---

xdialog 提供了一个简单的 API xdialog.confirm()。代码片段如下。可以找到更多演示here

document.getElementById('test').addEventListener('click', test); function test() { xdialog.confirm('Are you sure?', function() { // 如果选择了 ok/yes，就在这里工作... console.info('Done!'); }, { style: 'width :420px;font-size:0.8rem;', 按钮: { ok: 'yes text', cancel: 'no text' }, oncancel: function() { console.warn('Cancelled!'); } }); } test

---

使用是和否按钮制作了超级简单、微小的香草 js 确认对话框。很遗憾我们不能自定义原生的。

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

https://i.stack.imgur.com/nyGCF.png

---

我目前正在开发一个已经有自己的通知/对话框的网络工作流程，我最近（比如今天）创建了一个小型的自定义（并根据项目需要量身定制）YES/NO 对话框。

所有对话框都出现在模态层上。需要充分的用户关注。

我以这种方式定义选项配置。此选项用于定义按钮文本，以及单击时与每个按钮关联的值：

optionsConfig = [
   { text: 'Yes', value: true },
   { text: 'No', value: false }
]

函数的使用是这样的：

const answer = await notifier.showDialog('choose an option', options.config);
if (answer) {
   // 'Yes' was clicked
} else {
   // 'No' was clicked!
}

我所做的只是为每个选项创建一个 async 事件处理程序，这意味着，每个按钮都有一个简单的处理程序。每个处理程序都返回选项的值。处理程序被推入一个数组中。然后将该数组传递给 Promise.race，这就是 showDialog 方法的返回值，它将对应于 value 的实际值（由处理程序返回的值）。

不能提供太多代码。正如我所说，这是一个非常具体的案例，但这个想法可能对其他实现有用。二十行左右的代码。

---

与其他解决方案不同的另一个解决方案是使用新的 dialog 元素。您需要根据与其他元素的交互性来使用 show 或 showModal 方法。 close 方法可用于关闭打开的对话框。

<dialog>
  <button class="yes">Yes</button>
  <button class="no">No</button>
</dialog>

const dialogEl = document.querySelector("dialog"); const openDialog = document.querySelector("button.open-dialog"); const yesBtn = document.querySelector(".yes"); const noBtn = document.querySelector(".no");常量结果 = document.querySelector(".result"); openDialog.addEventListener("点击", () => { dialogEl.showModal(); }); yesBtn.addEventListener("click", () => { // 下面的行可以替换为您的数据库查询 result.textContent = "这可能是您的数据库查询"; dialogEl.close(); }); noBtn.addEventListener("click", () => { result.textContent = ""; dialogEl.close(); }); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');身体 { 字体系列：“机器人”； } 按钮 { 背景： hsl(206deg 64% 51%);白颜色;填充：0.5em 1em；边框：0 无；光标：指针； } 对话框 { 边框：0 无； } .result { 边距顶部：1em; }

Yes No

点我

Can I use?

现在与所有现代浏览器的兼容性都很好。

---

一个带有类的 vanilla JavaScript 选项，用于创建包含文本框的自定义模式对话框：

jsfiddle：

https://jsfiddle.net/craigdude/uh82mjtb/2/

html:

<!DOCTYPE html>
<html>


<style>
.modal_dialog
{
    box-sizing: border-box;
    background-color: #ededed;
    border-radius: 5px;
    border: 0.5px solid #ccc;
    font-family: sans-serif;    
    left: 30%;
    margin-left: -50px;
    padding: 15px 10px 10px 5px;
    position: fixed;
    text-align: center;
    width: 320px;
}

</style>

<script src="./CustomModalDialog.js"></script>

<script>
var gCustomModalDialog = null;


/** this could be static html from the page in an "invisible" state */
function generateDynamicCustomDialogHtml(){
    
    var html = "";
    html += '<div id="custom_modal_dialog" class="modal_dialog">';
    html += 'Name: <input id="name" placeholder="Name"></input><br><br>';
    html += '<button id="okay_button">OK</button>';
    html += '<button id="cancel_button">Cancel</button>';
    html += '</div>';
    return html;
}

function onModalDialogOkayPressed(event) {
    
    var name = document.getElementById("name");
    alert("Name entered: "+name.value);
}

function onModalDialogCancelPressed(event) {
    
    gCustomModalDialog.hide();
}

function setupCustomModalDialog() {

    var html = generateDynamicCustomDialogHtml();
    gCustomModalDialog = new CustomModalDialog(html, "okay_button", "cancel_button", 
            "modal_position", onModalDialogOkayPressed, onModalDialogCancelPressed);
}


function showCustomModalDialog() {
    
    if (! gCustomModalDialog) {
        setupCustomModalDialog();
    }
    gCustomModalDialog.show();  
    gCustomModalDialog.setFocus("name");
}


</script>

<body>

<button onclick="showCustomModalDialog(this)">Show Dialog</button><br>
Some content
<div id="modal_position">
</div>
Some additional content

</body>

</html>

CustomModalDialog.js：

/** Encapsulates a custom modal dialog in pure JS 
 */
class CustomModalDialog {
    
    /**
     * Constructs the modal content
     * @param htmlContent - content of the HTML dialog to show
     * @param okayControlElementId - elementId of the okay button, image or control
     * @param cancelControlElementId - elementId of the cancel button, image or control
     * @param insertionElementId - elementId of the <div> or whatever tag to 
     *            insert the html at within the document
     * @param callbackOnOkay - method to invoke when the okay button or control is clicked.
     * @param callbackOnCancel - method to invoke when the cancel button or control is clicked.
     * @param callbackTag (optional) - to allow object to be passed to the callbackOnOkay 
     *              or callbackOnCancel methods when they're invoked.
     */ 
    constructor(htmlContent, okayControlElementId, cancelControlElementId, insertionElementId,
                        callbackOnOkay, callbackOnCancel, callbackTag) { 

        this.htmlContent = htmlContent;
        this.okayControlElementId = okayControlElementId;               
        this.cancelControlElementId = cancelControlElementId;
        this.insertionElementId = insertionElementId;
        this.callbackOnOkay = callbackOnOkay;
        this.callbackOnCancel = callbackOnCancel;
        this.callbackTag = callbackTag;
    }


    /** shows the custom modal dialog */
    show() {
        // must insert the HTML into the page before searching for ok/cancel buttons
        var insertPoint = document.getElementById(this.insertionElementId);     
        insertPoint.innerHTML = this.htmlContent;
        
        var okayControl = document.getElementById(this.okayControlElementId);
        var cancelControl = document.getElementById(this.cancelControlElementId);

        okayControl.addEventListener('click', event => {
            this.callbackOnOkay(event, insertPoint, this.callbackTag);
        });
        cancelControl.addEventListener('click', event => {
            this.callbackOnCancel(event, insertPoint, this.callbackTag);
        });
    } // end: method    
    
    
    /** hide the custom modal dialog */
    hide() {
        var insertPoint = document.getElementById(this.insertionElementId);
        var okayControl = document.getElementById(this.okayControlElementId);
        var cancelControl = document.getElementById(this.cancelControlElementId);

        insertPoint.innerHTML = ""; 
        
        okayControl.removeEventListener('click',
            this.callbackOnOkay,
            false
        );
        cancelControl.removeEventListener('click',
            this.callbackOnCancel,
            false
        );
    } // end: method
    
    
    /** sets the focus to given element id 
     */
    setFocus(elementId) {
    
        var focusElement = document.getElementById(elementId);
        focusElement.focus();
        if (typeof  focusElementstr === "HTMLInputElement")
            focusElement.select();
    }

    
} // end: class

---

在点击操作之前询问的最简单方法如下

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

---

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

---