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

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

如何显示这样的对话框?


当前回答

避免内联JavaScript——改变行为意味着编辑代码的每一个实例,这并不漂亮!

更干净的方法是在元素上使用数据属性,例如dataconfirm=“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演示

其他回答

这是一个使用普通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>

另一种方法是:

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


   });

您可能正在寻找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方法的返回值,它将对应于值的实际值(由处理程序返回的值)。

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

或者简单地:

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