iOS Alert

HTML

<input id="title" placeholder="Title"/>
<textarea id="description" placeholder="Description"></textarea>
<input id="closetext" placeholder="Close button text"/>
<button onclick="alert(document.getElementById('title').value, document.getElementById('description').value, document.getElementById('closetext').value)">Activate Alert</button>

<script>
    function alert(title, description, closetext) {
    if (!closetext) { closetext = "Dismiss"; }
    var alertdiv = document.createElement('div');
    alertdiv.innerHTML = "<style>@-webkit-keyframes alert { from { -webkit-transform: scale3d(0.1,0.1,1); } 55% { -webkit-transform: scale3d(1.08,1.08,1); } 75% { -webkit-transform: scale3d(0.95,0.95,1); } to { -webkit-transform: scale3d(1,1,1); } } @-webkit-keyframes minimise { from { -webkit-transform: scale3d(1,1,1); } to { -webkit-transform: scale3d(0.1,0.1,1); } } div#overlay { -webkit-animation: alert 500ms linear; } div#alertdiv button { margin-top: 10px; height: 36px; width: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#BBBBDD), color-stop(50%,#666688), color-stop(50%,#333366), to(#444477)); color: white; font-weight: bold; font-size: 16px; border-radius: 7px; border: none; } div#alertdiv button:hover { background: -webkit-gradient(linear, left top, left bottom, from(#9999BB), color-stop(50%,#555577), color-stop(50%,#222244), to(#333355)); } div#alertdiv button:active { background: -webkit-gradient(linear, left top, left bottom, from(#777799), color-stop(50%,#333355), color-stop(50%,#111122), to(#222233)); }</style><div id='overlayAlert' style='position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in;'><div id='alertdiv' style='position: absolute; margin: 25% 25%; min-height: 50px; max-height: 70%; width: 50%; background: -webkit-gradient(radial, 50% -140%, 0, 50% -140%, 300,...