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

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

如何显示这样的对话框?


当前回答

您可能正在寻找confirm(),它显示一个提示,并根据用户的决定返回true或false:

if(确认(“确定要将此内容保存到数据库中吗?”)){//保存它!console.log('文件已保存到数据库。');}其他{//什么都不要做!console.log('未将其保存到数据库中。');}

其他回答

您可能正在寻找confirm(),它显示一个提示,并根据用户的决定返回true或false:

if(确认(“确定要将此内容保存到数据库中吗?”)){//保存它!console.log('文件已保存到数据库。');}其他{//什么都不要做!console.log('未将其保存到数据库中。');}

这是一个使用普通javascript的完全响应解决方案:

//单击显示对话框btn时调用函数document.getElementById(“btn show dialog”).onclick=function(){show_dialog()};var overlayme=document.getElementById(“对话框容器”);函数show_dialog(){/*显示对话框窗口的函数*/overlayme.style.display=“块”;}//如果单击确认btn,则执行函数confim()document.getElementById(“confirm”).onclick=function(){confirm()};函数确认(){/*单击确认时执行的代码*/overlayme.style.display=“无”;}//如果单击cancel btn,则执行函数cancel()document.getElementById(“cancel”).onclick=function(){cancel()};函数cancel(){/*单击取消时执行的代码*/overlayme.style.display=“无”;}.popup{宽度:80%;填充:15px;左:0;剩余利润:5%;边框:1px实心rgb(1.82,73);边界半径:10px;颜色:rgb(1.82,73);背景:白色;位置:绝对;顶部:15%;盒子阴影:5px 5px 5px#000;z指数:10001;字号:700;文本对齐:居中;}.覆盖{位置:固定;宽度:100%;顶部:0;左:0;右:0;底部:0;背景:rgba(0,0,0,.85);z指数:10000;显示:无;}@介质(最小宽度:768px){.popup{宽度:66.66666666%;剩余利润:16.4666666%;}}@介质(最小宽度:992px){.popup{宽度:80%;剩余利润:25%;}}@媒体(最小宽度:1200px){.popup{宽度:33.33333%;剩余利润:33.33333%;}}对话框btn{背景色:#44B78B;颜色:白色;字号:700;边框:1px实心#44B78B;边界半径:10px;高度:30px;宽度:30%;}对话框btn:悬停{背景色:#015249;光标:指针;}<div id=“content_1”class=“content_dialog”><p>Lorem ipsum dolor坐amet。阿利夸姆拉特(Aliquam erat volutpat)。无侵权行为,无恶意行为</p><p>阿利夸姆拉特(Aliquam erat volutpat)。无侵权行为,无恶意行为。Nullam felis tellus,tristique nec egestas in,luctus sed diam.Suspendiss potenti</p></div><button id=“btn show dialog”>确定</button><div class=“overlay”id=“dialog container”><div class=“popup”><p>这将被保存。是否继续</p><div class=“text right”><button class=“dialog btn btn cancel”id=“cancel”>取消</button><button class=“dialog btn btn primary”id=“confirm”>确定</button></div></div></div>

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

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

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

const dialogEl=document.querySelector(“对话框”);const openDialog=document.querySelector(“button.open dialog”);const yesBtn=document.querySelector(“.yes”);const noBtn=document.querySelector(“.no”);const result=document.querySelector(“.result”);openDialog.addEventListener(“单击”,()=>{dialogEl.showModal();});yesBtn.addEventListener(“单击”,()=>{//以下行可以由您的DB查询替换result.textContent=“这可能是您的DB查询”;dialogEl.close();});noBtn.addEventListener(“单击”,()=>{result.textContent=“”;dialogEl.close();});@导入url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');正文{字体系列:“Roboto”;}按钮{背景:hsl(206deg 64%51%);颜色:白色;衬垫:0.5em 1em;边框:0无;光标:指针;}对话框{边框:0无;}.结果{页边距:1em;}<对话框><button class=“yes”>是</button><button class=“no”>否</button></dialog><button class=“open dialog”>单击我</button><div class=“result”></div>

我可以使用吗?

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

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