I'm putting together a confirmation alert, clicking on the link it will appear. It's all working, however when the page is too big the alert does not appear as it goes to the top of the page. I need to make it 30px, but jquery has to identify the position of the scrollbar.
In the example I posted, just go to the bottom of the page and click on the link. Right after clicking the scroll bar, the alert will appear.
Does anyone know how to calculate top based on page position?
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><!--Alertmodal--><divclass="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>