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> ';
} 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>