personalizado - popup javascript ejemplo

¿Cómo crear un diálogo con las opciones "sí" y "no"?

Question

Voy a hacer un botón para realizar una acción y guardar los datos en una base de datos.

Una vez que el usuario haga clic en el botón, quiero que una alerta de JavaScript ofrezca las opciones de "sí" y "cancelar". Si el usuario selecciona "sí", los datos se insertarán en la base de datos, de lo contrario no se tomará ninguna medida.

¿Cómo muestro tal diálogo?

Answer 1

Cómo hacer esto usando ''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>

Answer 2

Este plugin puede ayudarte a jquery-confirm fácilmente tu uso

$.confirm({
title: ''Confirm!'',
content: ''Simple confirm!'',
confirm: function(){
alert(''Confirmed!'');
},
cancel: function(){
alert(''Canceled!'')
}
});

Answer 3

O simplemente:

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

Answer 4

Otra forma de hacer esto:

$("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
});

Answer 5

Puede interceptar el evento onSubmit ising JS. Luego llame a una alerta de confirmación y luego tome el resultado.

Answer 6

Tiene que crear custome confirmBox , no es posible cambiar los botones en el cuadro de diálogo que se muestra mediante la función de confirmación.

JQuery confirmBox

vea este ejemplo: 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();
}

Llámalo por tu código:

doConfirm("Are you sure?", function yes()
{
form.submit();
}, function no()
{
// do nothing
});

** Pure JavaScript confirmBox **

Ejemplo : 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>

Guión :

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

Answer 7

Evite JavaScript en línea : cambiar el comportamiento significaría editar cada instancia del código, ¡y no es bonito!

Una forma mucho más clara es usar un atributo de datos en el elemento, como data-confirm="Your message here" . Mi código a continuación admite las siguientes acciones, incluidos los elementos generados dinámicamente:

• a button y clics
• form presentación
• option selecciona

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>

Demostración de JSFiddle

Answer 8

Probablemente esté buscando confirm() , que muestra una solicitud y devuelve true o false según lo que el usuario decidió:

if (confirm(''Are you sure you want to save this thing into the database?'')) {
// Save it!
} else {
// Do nothing!
}

Answer 9

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

Answer 10

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

Utilice confirm lugar de alerta. Esta es la forma más fácil de lograr esa funcionalidad.