Ik ga een knop maken om een actie uit te voeren en de gegevens in een database op te slaan.
Zodra de gebruiker op de knop klikt, wil ik een JavaScript-waarschuwing met de opties ‘ja’ en ‘annuleren’. Als de gebruiker ‘ja’ selecteert, worden de gegevens in de database ingevoegd, anders wordt er geen actie ondernomen.
Hoe geef ik zo’n dialoogvenster weer?
Antwoord 1, autoriteit 100%
U zoekt waarschijnlijk naar confirm()
, die een prompt weergeeft en true
of false
retourneert op basis van wat de gebruiker heeft besloten:
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.');
}
Antwoord 2, autoriteit 7%
var answer = window.confirm("Save data?");
if (answer) {
//some code
}
else {
//some code
}
Gebruik window.confirm
in plaats van alert. Dit is de gemakkelijkste manier om die functionaliteit te bereiken.
Antwoord 3, autoriteit 6%
Hoe u dit doet met ‘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>
Antwoord 4, autoriteit 3%
Vermijd inline JavaScript– het veranderen van het gedrag zou betekenen dat je elke instantie van de code moet bewerken, en dat is niet mooi!
Een veel schonere manier is om een data-attribuut voor het element te gebruiken, zoals data-confirm="Your message here"
. Mijn onderstaande code ondersteunt de volgende acties, inclusief dynamisch gegenereerde elementen:
a
enbutton
klikkenform
verzendtoption
selecteert
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>
Antwoord 5, autoriteit 2%
U moet een aangepaste confirmBoxmaken. Het is niet mogelijk om de knoppen in het dialoogvenster dat wordt weergegeven door de bevestigingsfunctie te wijzigen.
jQuery confirmBox
Zie dit voorbeeld: 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();
}
Noem het bij uw code:
doConfirm("Are you sure?", function yes()
{
form.submit();
}, function no()
{
// Do nothing
});
Pure JavaScript confirmBox
Voorbeeld: 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
<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;
}
Antwoord 6
Deze plug-in kan u helpen jquery-confirmgebruiksvriendelijk
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
confirm: function(){
alert('Confirmed!');
},
cancel: function(){
alert('Canceled!')
}
});
Antwoord 7
Of gewoon:
<a href="https://some-link.com/" onclick="return confirm('Are you sure you want to go to that link?');">click me!</a>
Antwoord 8
Je kunt de gebeurtenis onSubmit
onderscheppen met JavaScript.
Bel vervolgens een bevestigingsmelding en pak het resultaat.
Antwoord 9
Dit is een volledig responsieve oplossing die gebruik maakt van vanilla javascript:
// Call function when show dialog btn is clicked
document.getElementById("btn-show-dialog").onclick = function(){show_dialog()};
var overlayme = document.getElementById("dialog-container");
function show_dialog() {
/* A function to show the dialog window */
overlayme.style.display = "block";
}
// If confirm btn is clicked , the function confim() is executed
document.getElementById("confirm").onclick = function(){confirm()};
function confirm() {
/* code executed if confirm is clicked */
overlayme.style.display = "none";
}
// If cancel btn is clicked , the function cancel() is executed
document.getElementById("cancel").onclick = function(){cancel()};
function cancel() {
/* code executed if cancel is clicked */
overlayme.style.display = "none";
}
.popup {
width: 80%;
padding: 15px;
left: 0;
margin-left: 5%;
border: 1px solid rgb(1,82,73);
border-radius: 10px;
color: rgb(1,82,73);
background: white;
position: absolute;
top: 15%;
box-shadow: 5px 5px 5px #000;
z-index: 10001;
font-weight: 700;
text-align: center;
}
.overlay {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.85);
z-index: 10000;
display :none;
}
@media (min-width: 768px) {
.popup {
width: 66.66666666%;
margin-left: 16.666666%;
}
}
@media (min-width: 992px) {
.popup {
width: 80%;
margin-left: 25%;
}
}
@media (min-width: 1200px) {
.popup {
width: 33.33333%;
margin-left: 33.33333%;
}
}
.dialog-btn {
background-color:#44B78B;
color: white;
font-weight: 700;
border: 1px solid #44B78B;
border-radius: 10px;
height: 30px;
width: 30%;
}
.dialog-btn:hover {
background-color:#015249;
cursor: pointer;
}
<div id="content_1" class="content_dialog">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
</div>
<button id="btn-show-dialog">Ok</button>
<div class="overlay" id="dialog-container">
<div class="popup">
<p>This will be saved. Continue ?</p>
<div class="text-right">
<button class="dialog-btn btn-cancel" id="cancel">Cancel</button>
<button class="dialog-btn btn-primary" id="confirm">Ok</button>
</div>
</div>
</div>
Antwoord 10
Een andere manier om dit te doen:
$("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
});
Antwoord 11
xdialogbiedt een eenvoudige API xdialog.confirm( ). Codefragment volgt. Meer demo’s zijn hier
te vinden
document.getElementById('test').addEventListener('click', test);
function test() {
xdialog.confirm('Are you sure?', function() {
// do work here if ok/yes selected...
console.info('Done!');
}, {
style: 'width:420px;font-size:0.8rem;',
buttons: {
ok: 'yes text',
cancel: 'no text'
},
oncancel: function() {
console.warn('Cancelled!');
}
});
}
<link href="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js"></script>
<button id="test">test</button>
Antwoord 12
Supereenvoudig gemaakt, kleine vanilla js-bevestigingsdialoog met Ja en Nee-knoppen.
Het is jammer dat we de native niet kunnen aanpassen.
https://www.npmjs.com/package/yesno-dialog.
Antwoord 13
De gemakkelijkste manier om te vragen voordat actie op klik wordt uitgevoerd, is door te volgen
<a onclick="return askyesno('Delete this record?');" href="example.php?act=del&del_cs_id=<?php echo $oid; ?>">
<button class="btn btn-md btn-danger">Delete </button>
</a>
Antwoord 14
document.getElementById("button").addEventListener("click", function(e) {
var cevap = window.confirm("Sat?n almak istediginizden emin misiniz?");
if (cevap) {
location.href='Http://www.evdenevenakliyat.net.tr';
}
});