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.