Tenho um código que ao clicar no botão ele abre uma nova guia. Dependendo da condição do relatório ele mostra um Alert
que ao clicar no Ok ele fecha a guia que foi aberta. Tem como eu personalizar esse alert, para ficar mais bonito em meu site?? Meu código está em codeigniter.
-
Sim, é possível, isso está mais para o lado do javascript que do php.– rrayCommented 29/10/2015 às 11:44
Adicione um comentário
|
2 Respostas
Não há como personalizar um alert
, mas você pode usar algum modal, um excelente que eu recomendo é o Bootbox.js baseado em Bootstrap. Exemplo:
bootbox.alert("Hello World");
$('#abrir').click(function(event){
bootbox.alert('Oi, eu sou um alert.', function(){
bootbox.alert('Oi eu sou um alert chamado apartir de um callback de outro alert.');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
<div class="container">
<br>
<button class="btn btn-primary" id="abrir">Abrir Alert</button>
</div>
-
Só que tem um probleminha, esse Alert que estou criando ele está no Controller para que consiga ver se tem algum item selecionado.– KetlinCommented 29/10/2015 às 12:06
-
-
Se você consegue fazer uma chamada ao alert conseguiria também chamar o código que o @KaduAmaral postou. O princípio seria o mesmo, não?– MoyknCommented 29/10/2015 às 16:14
Você pode criar um html
personalizado, parecendo com um modal, e criar uma função para mostrar o mesmo, como se fosse um alert.
Um exemplo seria assim:
Alert.render('Alert Diferente')
#dialogoverlay{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 10;
}
#dialogbox{
display: none;
position: fixed;
background: #000;
border-radius:7px;
width:550px;
z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }
<script>
function CustomAlert(){
this.render = function(dialog){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Título";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
}
this.ok = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
<h2>Meus Alerts modificados</h2>
<button onclick="alert('Alert Normal')">Alert Normal</button>
<button onclick="Alert.render('Alert Modificado')">Custom Modificado</button>
Desta forma, você pode chamar o mesmo da mesma forma que chama o alert:
Alert.render('Alert Diferente')
Ou em algum evento javascript.
Créditos: developphp.