3

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.

1
  • Sim, é possível, isso está mais para o lado do javascript que do php.
    – rray
    Commented 29/10/2015 às 11:44

2 Respostas 2

10

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>

3
  • Só que tem um probleminha, esse Alert que estou criando ele está no Controller para que consiga ver se tem algum item selecionado.
    – Ketlin
    Commented 29/10/2015 às 12:06
  • Hmm pode postar seu código @Ketlin?
    – KaduAmaral
    Commented 29/10/2015 às 12:13
  • 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?
    – Moykn
    Commented 29/10/2015 às 16:14
3

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 .

Créditos: developphp.

JSFIDDLE

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