Ajuda - janela confirme customizada e arrastável

Ajuda - janela confirme customizada e arrastável

by Angelo Rogério Rubin

HTML

<form id="form_cd_cliente">
           

            <!-- inicio do conteudo-->
            <div id="conteudo" class="conteudo">

                <!-- cabeçalho da div -->
                <div id="div_heder_cd_cliente"> <label class="lb_txt"> Cadastro de produtos </label> <div id="botao_fechar" onclick="actions_cd_cliente('close');"> </div></div> <hr id="hr1"/>
                <!-- fim do cabeçalho -->

                <!-- inicio dos campos 
                <div id="campos"> </div>
                <div id="div_lateral_1" onclick="confirm();"> <div id="div_header_lt_dir1"> <label class="lb_cbd"> Tipo </label> <div id="add_info1" onclick="actions_cd_cliente('open_panel_1')"></div> </div></div>
                <div id="div_lateral_2"> <div id="div_header_lt_dir2"> <label class="lb_cbd"> Unidade </label> <div id="add_info2"  onclick="actions_cd_cliente('open_panel_2')"></div> </div></div>
                fim campos -->
                <input type="button"  value="show modal" id="btn_show_dialog" onclick="ok()">
            </div>
            <!-- fim do conteudo-->

        </form>

CSS

/* carcaça da modal confirm*/
#confirm{
    width: 296px;
    height: 110px;
    position: absolute;
    z-index: 3;
    float: left;
    left: 50%;
    top: 50%;
    
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    
    
    background: -webkit-linear-gradient(Gainsboro, Silver, DarkGray); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(Gainsboro, Silver, DarkGray); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(Gainsboro, Silver, DarkGray); /* For Firefox 3.6 to 15 */
    background: linear-gradient(Gainsboro, Silver, DarkGray); /* Standard syntax (must be last) */
}

/* carcaça do titulo */
#title_box{
    width: 99%;
    height: 27px;
    border: 1px silver solid;
    display: block;
    float: left;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#title_box:hover, #title_xx:hover{cursor: move;}

/* titulo da modal */
#title_xx{
    width: 80%;
    height: 19px;
    font: 14px monospace, fantasy, sans-serif;
    margin: 5px 0 0 6px;
    display: block;
    float: left;
}

/* botão fechar */
#img_close{
    width: 27px;
    height: 27px;
    float: right;
    background-image: url(../imagens/close_dialogs.png);
    background-repeat: no-repeat;
}
/* botão fechar */
#img_close:hover{cursor: pointer;}

/* carcaça do conteudo */
#conteudo_box{
    width: 100%;
    height: 50px;
    display: block;
    float: left;
}

/* icone da modal */
#icone{
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 5px;
    background-image: url(../imagens/confirm_dialog.png);
    background-repeat: no-repeat; 
}

/* label confirme */
#label_confirm{
    width: 78%;
    height: 22px;
    font: 18px monospace, fantasy, sans-serif;
    margin: 12px 0 0 6px;
    display: block;
    float: left; 
}

/* carcaça dos botões*/
#botoes{
    width: 100%;
    height: 32px;
    font: 18px monospace, fantasy, sans-serif;
   ...

JavaScript

// código responsável pelo arrasto da modal
var ie = document.all;
var nn6 = document.getElementById && !document.all;
var isdrag = false;
var x, y;
var dobj;

function movemouse(e) {
    if (isdrag) {
        dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
        dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
        return false;
    }
}

function selectmouse(e) {
    var fobj = nn6 ? e.target : event.srcElement;
    var topelement = nn6 ? "HTML" : "BODY";
    while (fobj.tagName != topelement && fobj.className != "arrastavel") {
        fobj = nn6 ? fobj.parentNode : fobj.parentElement;
    }
    if (fobj.className == "arrastavel") {
        isdrag = true;
        dobj = fobj;
        tx = parseInt(dobj.style.left + 0);
        ty = parseInt(dobj.style.top + 0);
        x = nn6 ? e.clientX : event.clientX;
        y = nn6 ? e.clientY : event.clientY;
        document.onmousemove = movemouse;
        return false;
    }
}
document.onmousedown = selectmouse;
document.onmouseup = new Function("isdrag=false");
var value = null;

function monta_confirm(msg) {
    if (document.getElementById('confirm') == null) {
        ///////////////// carcaça da principal (modal) /////////////////////////////////////
        var div = document.createElement('div');
        div.setAttribute('id', 'confirm');
        div.setAttribute('class', 'arrastavel');
        ////////////////////////////////////////////////////////////////////////////////////

        ///////////////// carcaça do titulo ///////////////////////////////////////////////
        var label_title = document.createElement('label');
        label_title.setAttribute('id', 'title_box');
        ////////////////////////////////////////////////////////////////////////////////////

        ////////////// label do titulo /////////////////////////////////////////////////////
        var title = document.createElement('label');
        title.setAttribute('id', 'title_xx');
       ...