如何使用“确定”和“取消”选项创建对话框

我要做一个按钮，采取行动并将数据保存到数据库中。

一旦用户单击按钮，我希望JavaScript警报提供“是”和“取消”选项。如果用户选择“是”，数据将被插入数据库，否则将不采取任何操作。

如何显示这样的对话框？

当前回答

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

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

2012-02-17 20:06:28

其他回答

另一种方法是：

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


   });

2016-11-24 07:18:28

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

2012-02-17 20:06:59

用Yes和No按钮制作了一个超级简单的小香草js确认对话框。很遗憾我们不能定制本地的。

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

2020-08-10 19:14:48

一个普通的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>

自定义模式对话框.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

2022-07-17 18:02:38

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

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

我可以使用吗？

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

2022-05-16 19:05:57

如何使用“确定”和“取消”选项创建对话框

推荐文章

最新文章

标签