1
Well I’m mounting a confirmation alert, by clicking on the link it will appear. Everything is working, but when the page and very large the alert does not appear, because it goes to the top of the page. I need to make it 30px, but jquery has to identify the position of the scroll bar.
In the example I posted just go to the bottom of the page and click on the link. Soon after clicking up the scroll bar, and the alert will have appeared.
Does anyone know how to calculate the 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>
<!-- 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>
yes I agree perfectly
– Hugo Borges