如何用“是”和“否”选项创build对话框？
我将做一个button来采取行动，并将数据保存到数据库中。
一旦用户点击button，我想要一个JavaScript警报提供“是”和“取消”选项。 如果用户select“是”，数据将被插入到数据库中，否则不会采取任何行动。
我如何显示这样的对话框？
你可能正在寻找confirm() ，它会显示一个提示，并根据用户的决定返回true或false ：
if (confirm('Are you sure you want to save this thing into the database?')) { // Save it! } else { // Do nothing! }
var answer = confirm("Save data?") if (answer) { //some code } else { //some code }
使用confirm而不是警报。 这是实现该function的最简单的方法。
如何使用“内嵌”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" 。 我下面的代码支持以下动作，包括dynamic生成的元素：
-
a和button点击 -
form提交 -
optionselect
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演示
您必须创buildcustome 确认框 ，不能更改确认function显示的对话框中的button。
jquery 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 });
**纯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; }
这个插件可以帮助你jQuery确认易于使用
$.confirm({ title: 'Confirm!', content: 'Simple confirm!', confirm: function(){ alert('Confirmed!'); }, cancel: function(){ alert('Canceled!') }
}）;
你可以拦截JS的onSubmit事件。 然后调用确认提醒，然后获取结果。
另一种方法来做到这一点：
$("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 });
document.getElementById("button").addEventListener("click", function(e) { var cevap = window.confirm("Satın almak istediğinizden emin misiniz?"); if (cevap) { location.href='Http://www.evdenevenakliyat.net.tr'; } });
