are you sure delete ...

ARE YOU COMPLETELY SURE OF DELETE YOUR ACCOUNT..

by Akram kamal

HTML

<div class="hidden-form editAccount"> <span title="close window">x</span>

     <h3>Edit your account</h3>

    <form name="editAccount" method="post">
        <input type="email" name="email" value="[email protected]" placeholder="email" />
        <input type="password" name="password" maxlength="8" placeholder="password (max 8)" />
        <input type="text" name="log_user" maxlength="16" value="someone" placeholder="user (max 16)" />
        <input type="submit" name="save" value="save" disabled />
        <input type="hidden" name="log_id" value="23" /> <a class="doDelete" href="#" title="Click here to delete your account">Delete my account</a>

    </form>
    <div class="delete">
         <h3>ARE YOU COMPLETELY SURE OF DELETE YOUR ACCOUNT..</h3>

        <div><a class='yes'>YES</a><a class='no'>NO</a>

        </div>
    </div>
</div>

CSS

.hidden-form div.delete {
    display:none
}
.hidden-form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    width:400px;
    padding:20px;
    background:#efefef;
    z-index:99;
    border:solid 1px #ccc;
    text-align:left;
}
.hidden-form form > input {
    border:solid 1px #ccc;
    padding:0.5em 1em;
    margin:0.2em;
    width:90%;
}
.hidden-form form > input[type="submit"] {
    width:96%;
    background:#adc948;
    color:#fff;
    border:0;
}
.hidden-form form > input[type="checkbox"] {
    display:inline-block;
    margin:1em 0.5em 1em 2%;
    width:10px;
    float:left;
}
.hidden-form form > label {
    display:inline;
    color:#999;
    margin:0.7em 0.2em;
    font-size:.9em;
    float:left;
}
.hidden-form > h3 {
    padding:5px 2% 2px;
    text-align:left;
}
.hidden-form > p {
    padding:3px 2% 1px;
    text-align:left;
    font-size:.9em;
    color:#999;
}
.hidden-form form > a, .hidden-form > a {
    clear:both;
    display:block;
    margin:10px 10px 0 !important;
    text-align:right;
}
.hidden-form > span {
    float:right;
    width:20px;
    height:20px;
    display:inline-block;
    cursor:pointer;
}
.yes {
    margin:10px;
    width:20%;
    padding:10px;
    display:inline-block;
    background:green;
    text-align:center;
    color:#fff;
}
.no {
    margin:10px;
    width:20%;
    padding:10px;
    display:inline-block;
    background:red;
    text-align:center;
    color:#fff;
}

JavaScript

// abrir editar datos de cuenta
$(document).on("click", ".user-header h3", function (e) {
    e.preventDefault();
    $(".editAccount").css("display", "block");
});

// eliminar cuenta
$(document).on("click", ".editAccount a.doDelete", function (e) {
    e.preventDefault();
    $(".editAccount").children().hide().filter(".delete").show()
    
});

$(document).on("click", ".no", function (e) {
    $(".editAccount").children().show().filter(".delete").hide()
});

$(document).on("click", ".yes", function (e) {
    alert("delete account");
    $(".editAccount").children().show().filter(".delete").hide()
});