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

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

如何显示这样的对话框?


当前回答

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

使用window.conf而不是alert。这是实现该功能的最简单方法。

其他回答

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

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

我目前正在开发一个web工作流,它已经有了自己的通知/对话框,我最近(比如今天)创建了一个小型的自定义(并根据项目需要定制)是/否对话框。

所有对话框都显示在模态图层上。需要用户充分注意。

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

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

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

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

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

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

如何使用“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>
var answer = window.confirm("Save data?");
if (answer) {
    //some code
}
else {
    //some code
}

使用window.conf而不是alert。这是实现该功能的最简单方法。