Galera estou tentando montar um sistema de alert personalizado com jQuery.
Ele esta funcionando perfeitamente, porém sempre tenho que esquecer as div nos HTML.
Tem alguma forma de o próprio jQuery fazer isso? Sendo possível apenas chamar a função Alert.show('Alert Modifixxxxcado', 'blabla');
.
function CustomAlert() {
// Exibe a div modal
this.show = function(dialog, title) {
var winW = $(window).width();
var winH = $(window).height();
var dialogoverlay = $('#dialogoverlay')[0];
var dialogbox = $('#dialogbox')[0];
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";
$("#dialogboxhead").html(title);
$("#dialogboxbody").html(dialog);
$("#dialogboxfoot").html('<button onclick="Alert.ok()">OK</button>');
};
// Fecha a div
this.ok = function() {
$('#dialogoverlay')[0].style.display = "none";
$('#dialogbox')[0].style.display = "none";
};
}
var Alert = new CustomAlert();
$(document).ready(function() {
Alert.show('Alert Modifixxxxcado', 'blabla');
});
#dialogoverlay {
display: none;
opacity: 0.8;
position: fixed;
top: 0px;
left: 0px;
background: #ffffff;
width: 100%;
z-index: 9998;
}
#dialogbox {
display: none;
position: fixed;
background: #000;
border-radius: 7px;
width: 550px;
z-index: 9999;
}
#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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Alert modal -->
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>