Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

wellen1

janela confirme customizada e arrastável

Recommended Posts

Não estou conseguindo anexar um evento de onclick nos botões da caixa de dialogo. O que eu quero é que quando clicado em algum desses botões ele tenha a mesmas reação do confirm nativo do javascript, ou seja na chamada da modal eu tenha um retorno true se o botão sim foi clicado e false se o não foi clicado, como esta aqui do forum que ao clicar em code.
Há também quando eu clico e arrasto a caixa de dialogo pela primeira vez ela tende ir para a parte superior esquerda da janela, só depois eu consigo ajustá-la e deixar onde eu quiser. Como resolver isso?

/* 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;
    float: left;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* botões ok e cancela */
#btn_ok, #btn_not{
    width: 65px;
    height: 22px;
    display: block;
    font: 12px monospace, fantasy, sans-serif;
    background: #cccccc;
    
    margin: 3px 4px 0 27%;
    border: 1px #cccccc solid !important;
    float: left;
}
#btn_ok{margin: 3px 4px 0 27%;}
#btn_not{ margin: 3px 4px 0 3px;}
#btn_ok:hover, #btn_not:hover{
    cursor: pointer;
    background:#99ccff;
    border: 1px  #0099ff solid !important;
}


/* mascara de fundo */
#mask_fundo {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);	
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    visibility: visible;
    opacity: 0.3;
}
// 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');
        title.innerHTML = "Confirme";
        label_title.appendChild(title); // adicona o titulo a carcaça do titulo
        ////////////////////////////////////////////////////////////////////////////////////

        ////////////// botão fechar ////////////////////////////////////////////////////////
        var img_close = document.createElement('span');
        img_close.setAttribute('id', 'img_close');
        img_close.setAttribute('onclick', "confirm('close')");
        label_title.appendChild(img_close); // adicona o botão fechar a carcaça do titulo
        ////////////////////////////////////////////////////////////////////////////////////

        /////////////// carcaça do conteudo ///////////////////////////////////////////////
        var conteudo = document.createElement('div');
        conteudo.setAttribute('id', 'conteudo_box');
        ////////////////////////////////////////////////////////////////////////////////////

        ////////////// botão icone ////////////////////////////////////////////////////////
        var icone = document.createElement('span');
        icone.setAttribute('id', 'icone');
        conteudo.appendChild(icone); // adicona o icone a carcaça do conteudo
        ////////////////////////////////////////////////////////////////////////////////////

        ////////////// label de confirmação //////////////////////////////////////////////
        var lbl_confirm = document.createElement('label');
        lbl_confirm.setAttribute('id', 'label_confirm');
        lbl_confirm.innerHTML = msg;
        conteudo.appendChild(lbl_confirm); // adicona o labe de confiração a carcaça do conteudo
        ////////////////////////////////////////////////////////////////////////////////////

        /////////////// carcaça do botões //////////////////////////////////////////////////
        var botoes = document.createElement('div');
        botoes.setAttribute('id', 'botoes');
        ////////////////////////////////////////////////////////////////////////////////////

        ////////////// botão  ok e cancela ////////////////////////////////////////////////
        var btnOk = document.createElement('button');
        btnOk.setAttribute('type', 'button');
        btnOk.setAttribute('id', 'btn_ok');
        btnOk.setAttribute('onclick', "confirm(true)");
        btnOk.innerHTML = "Sim";
        botoes.appendChild(btnOk); // adiciona o botão ok a carcaça dos botões

        var btnNOT = document.createElement('button');
        btnNOT.setAttribute('type', 'button');
        btnNOT.setAttribute('id', 'btn_not');
        btnNOT.setAttribute('onclick', "confirm(false)");
        btnNOT.innerHTML = "Não";
        botoes.appendChild(btnNOT); // adiciona o botão ok a carcaça dos botões
        ////////////////////////////////////////////////////////////////////////////////////

        div.appendChild(label_title); // adiciona a carcaça do titulo a carcaça principal da modal
        div.appendChild(conteudo); // adiciona a carcaça do conteudo a carcaça principal da modal
        div.appendChild(botoes); // adiciona a carcaça  botões a carcaça principal da modal

        /////////////// mascara de fundo //////////////////////////////////////////////////
        var mask_fundo = document.createElement('div');
        mask_fundo.setAttribute('id', 'mask_fundo');
        ////////////////////////////////////////////////////////////////////////////////////

        window.document.body.appendChild(div); // adiciona principal da modal ao documento 
    }
}

function confirm(msg) {
    
    monta_confirm(msg);
  if (msg == true) {
       //  alert(msg);
      value=true;
    } else if (msg == false) {
        //alert(false);
       value=false;
    } else if (msg == 'close') {
       // alert('close');
       value='close';
    }
    return true;
}
<html>   
    <link href="../Css/menu.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="../Css/stily_dialogs.css" rel="stylesheet" type="text/css"/>
    <link href="../Css/stily_cd_produtos.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="../js/cd_produtos.js" type="text/javascript"></script>
    <script src="../js/dialogs.js" type="text/javascript"></script>

    <?php include './head.php'; ?> <!-- head  da pagina -->
    <body>   
        <form id="form_cd_cliente">
            <?php include './header.php'; ?> <!-- cabeçalho e menu da pagina -->

            <!-- 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>
    </body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.