1

Bom estou montando uma alerta de confirmação, ao clicar no link ele irá aparecer. Esta tudo funcionando, porém quando a pagina e muito grande o alerta não aparece, pois ele vai para o top da página. Preciso fazer ele ficar 30px, porém o jquery tem que identificar a posição da barra de rolagem.

No exemplo que postei basta ir no final da página e clicar no link. Logo após clicar suba a barra de rolagem, e o alerta vai ter aparecido.

Alguém sabe como calcular o top com base na posição da página?

function CustomAlert() {

    /**
     * Exibe a div modal
     * 
     * @this.show
     * 
     * @param dialog - Texto que será exibido
     * @param link - FALSE = Não efetua nenhuma operação, TRUE = Volta a página anterior, Ou adiciona o link para redirecionamento
     * @param title - Titulo que será exibido
     * @param confirm - FALSE = Não exibe botão calcelar, TRUE = Exibe botnao cancelar
     */
    this.show = function (dialog, title, link, confirm) {

        // Remove o focus dos input
        $("input").blur();

        // Inicia variáveis
        var bt;
        var bt_cancel;

        // Verifica se exibe botão cancelar
        if (confirm === true) {
            bt_cancel = '<button class="button_cancel" onclick="Alert.ok()">VOLTAR</button>&nbsp;';
        } else {
            bt_cancel = '';
        }

        // Verifica o link de retorno
        if ((link !== true) && (link !== false)) {
            bt = '' + bt_cancel + '<button class="button_ok" onclick="window.location=\'' + link + '\'">OK</button>';
        }
        if ((link === false) || (link === "0")) {
            bt = '<button class="button_ok" onclick="Alert.ok()">OK</button>';
        }
        if ((link === true) || (link === "1")) {
            bt = '<button class="button_ok" onclick="history.back()">OK</button>';
        }

        // Verifica clique no teclado     
        $(document).on('keypress', function (event) {
            if (event.keyCode === 13) {
                $('.button_ok').click();
            }
            if (event.keyCode === 27) {
                $('.button_cancel').click();
            }
        });

        // CSS posicionamento da div
        $('.dialogbox').css({
            "display": "block"
        });

        // Escurece a tela
        $("body").append('<div class="shadow-full"></div>');

        // Monta a div
        $(".dialogboxhead").html(title);
        $(".dialogboxbody").html(dialog);
        $(".dialogboxfoot").html(bt);
    };

    // Fecha a div
    this.ok = function () {
        $('.shadow-full').fadeOut('fast');
        $('.dialogbox').hide();
    };
}
var Alert = new CustomAlert();
body {
  background: #000;
  color: #cccccc;
  }

.dialogbox { 
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 550px;
    top: 60px;
    border-radius: 4px;
    background: #FFFFFF;
    overflow: hidden;
    display: none;
    z-index: 9999;
}
.dialogbox > div {
    margin: 8px; 
}
.dialogbox > div > .dialogboxhead { 
    font-size: 30px; 
    padding: 10px; 
    text-align: center; 
}
.dialogbox > div > .dialogboxbody {
    padding: 20px;
}
.dialogbox > div > .dialogboxfoot {
    text-align: center; 
}
.dialogboxfoot .button_ok, .dialogboxfoot .button_cancel {
    margin-bottom: 5px;
    border: 0;
    padding: 5px;
    width: 100px;
    height: 42px; 
    cursor: pointer;
    border-radius: 4px;
    color: #FFFFFF; 
}
/* Mobile */
@media only screen and (max-width: 900px) {

    .dialogbox {
        width: 95%;
        top: 3%;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <!-- Alert modal -->
        <div class="dialogbox">
            <div>
                <div class="dialogboxhead"></div>
                <div class="dialogboxbody"></div>
                <div class="dialogboxfoot"></div>
            </div>
        </div>

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

        
        <a onclick="Alert.show('TEXTO AQUI','TÍTULO','http://google.com',true)">Clique aqui</a>

1
  • sim concordo perfeitamento Commented 29/12/2016 às 17:44

1 Resposta 1

3

Pode mudar position para fixed, deixando o estilo dessa forma:

.dialogbox { 
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 550px;
    top: 60px;
    border-radius: 4px;
    background: #FFFFFF;
    overflow: hidden;
    display: none;
    z-index: 9999;
}

Que ele vai exibir na posição definida independente da posição do scroll.

Exemplo:

function CustomAlert() {

    /**
     * Exibe a div modal
     * 
     * @this.show
     * 
     * @param dialog - Texto que será exibido
     * @param link - FALSE = Não efetua nenhuma operação, TRUE = Volta a página anterior, Ou adiciona o link para redirecionamento
     * @param title - Titulo que será exibido
     * @param confirm - FALSE = Não exibe botão calcelar, TRUE = Exibe botnao cancelar
     */
    this.show = function (dialog, title, link, confirm) {

        // Remove o focus dos input
        $("input").blur();

        // Inicia variáveis
        var bt;
        var bt_cancel;

        // Verifica se exibe botão cancelar
        if (confirm === true) {
            bt_cancel = '<button class="button_cancel" onclick="Alert.ok()">VOLTAR</button>&nbsp;';
        } else {
            bt_cancel = '';
        }

        // Verifica o link de retorno
        if ((link !== true) && (link !== false)) {
            bt = '' + bt_cancel + '<button class="button_ok" onclick="window.location=\'' + link + '\'">OK</button>';
        }
        if ((link === false) || (link === "0")) {
            bt = '<button class="button_ok" onclick="Alert.ok()">OK</button>';
        }
        if ((link === true) || (link === "1")) {
            bt = '<button class="button_ok" onclick="history.back()">OK</button>';
        }

        // Verifica clique no teclado     
        $(document).on('keypress', function (event) {
            if (event.keyCode === 13) {
                $('.button_ok').click();
            }
            if (event.keyCode === 27) {
                $('.button_cancel').click();
            }
        });

        // CSS posicionamento da div
        $('.dialogbox').css({
            "display": "block"
        });

        // Escurece a tela
        $("body").append('<div class="shadow-full"></div>');

        // Monta a div
        $(".dialogboxhead").html(title);
        $(".dialogboxbody").html(dialog);
        $(".dialogboxfoot").html(bt);
    };

    // Fecha a div
    this.ok = function () {
        $('.shadow-full').fadeOut('fast');
        $('.dialogbox').hide();
    };
}
var Alert = new CustomAlert();
body {
  background: #000;
  color: #cccccc;
  }

.dialogbox { 
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 550px;
    top: 60px;
    border-radius: 4px;
    background: #FFFFFF;
    overflow: hidden;
    display: none;
    z-index: 9999;
}
.dialogbox > div {
    margin: 8px; 
}
.dialogbox > div > .dialogboxhead { 
    font-size: 30px; 
    padding: 10px; 
    text-align: center; 
}
.dialogbox > div > .dialogboxbody {
    padding: 20px;
}
.dialogbox > div > .dialogboxfoot {
    text-align: center; 
}
.dialogboxfoot .button_ok, .dialogboxfoot .button_cancel {
    margin-bottom: 5px;
    border: 0;
    padding: 5px;
    width: 100px;
    height: 42px; 
    cursor: pointer;
    border-radius: 4px;
    color: #FFFFFF; 
}
/* Mobile */
@media only screen and (max-width: 900px) {

    .dialogbox {
        width: 95%;
        top: 3%;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <!-- Alert modal -->
        <div class="dialogbox">
            <div>
                <div class="dialogboxhead"></div>
                <div class="dialogboxbody"></div>
                <div class="dialogboxfoot"></div>
            </div>
        </div>

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

        
        <a onclick="Alert.show('TEXTO AQUI','TÍTULO','http://google.com',true)">Clique aqui</a>

1
  • 1
    deu certo. muito obrigado Commented 29/12/2016 às 17:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .