Alert system with jQuery

Question

Guys I’m trying to build a custom Alert system with jQuery.

It is working perfectly, but I always have to forget the div in HTML.

Is there any way for jQuery himself to do this? If it is possible to just call the function 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>

Answer 1

Can do using append

$(body).append('<div id="dialogoverlay"></div>');
$(body).append('<div id="dialogbox"><div><div id="dialogboxhead"></div><div id="dialogboxbody"></div><div id="dialogboxfoot"></div></div></div>');

And when it closes, remove them:

$('#dialogoverlay').remove();
$('#dialogbox').remove();