Untitled

<html>
    <head>
        <style>
            #messagebox {
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                width: 500px;
                max-height: 150px;
                background-image: url(icon.png);
                background-position: 35px 35px;
                padding: 5px;
                padding-left: 150px;
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -75px;
                margin-left: -250px;
                z-index: 10;
                border: 1px black solid;
                border-radius: 5px;
                box-shadow: 0 0 5px 1px black inset;
            }
            #messagebox h1 {
                padding: 5px;
                margin: 0;
            }
            #messagebox span {
                margin-left: 10px;
                display: block;
            }
            .hidden {
                display:none;
            }
        </style>
        <script type="text/javascript" src="jq.js"></script>
        <script type="text/javascript">
            function hideDialog(){
                $("#messagebox").addClass("hidden");
            }
            function showDialog(headline, message){
                var dialog = $("#messagebox");
                dialog.children("h1").text(headline);
                dialog.children("span").text(message);
                dialog.removeClass("hidden");
            }
        </script>
    </head>
    <body onload="showDialog('attention','zombie potatos are attacking!');">
        <div id="messagebox" class="hidden">
            <h1>headline</h1>
            <span>message</span>
            <button onclick="hideDialog();">OK</button>
        </div>
    </body>
</html>