我将制作一个按钮来执行操作并将数据保存到数据库中。
一旦用户点击按钮,我想要一个 JavaScript 警报来提供“是”和“取消”选项。如果用户选择“是”,则数据将插入到数据库中,否则不采取任何行动。
如何显示这样的对话框?
我将制作一个按钮来执行操作并将数据保存到数据库中。
一旦用户点击按钮,我想要一个 JavaScript 警报来提供“是”和“取消”选项。如果用户选择“是”,则数据将插入到数据库中,否则不采取任何行动。
如何显示这样的对话框?
您可能正在寻找confirm(),它显示提示并返回true或false基于用户的决定:
if (confirm('Are you sure you want to save this thing into the database?')) {
  // Save it!
  console.log('Thing was saved to the database.');
} else {
  // Do nothing!
  console.log('Thing was not saved to the database.');
}
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和button点击form 提交option 选择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>
您必须创建一个自定义的confirmBox。无法更改确认功能显示的对话框中的按钮。
看这个例子: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
});
示例: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>
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;
}