Dialog 코드 샘플

close

Javascript

<script type="text/javascript">
function get(obj) {
    if (typeof obj == "object") {
        return obj;
    }
    return document.getElementById(obj);
}
function show(obj) {
    get(obj).style.display = "block";
}
function hide(obj) {
    get(obj).style.display = "none";
}
function showDialog(title, message, buttons) {
    var dlgTitleElt = get("dlg-title");
    var dlgMessageElt = get("dlg-message");
    var dlgButtonsElt = get("dlg-buttons");
    show("gray-out");
    show("popup-dialog");
    dlgTitleElt.innerHTML = title;
    dlgMessageElt.innerHTML = message;
}
function hideDialog() {
    hide("gray-out");
    hide("popup-dialog");
}
</script>

CSS

<style type="text/css">
    #gray-out {z-index:100;top:0px;left:0px;width:100%;height:100%;position:fixed;display:none;background-color:black;opacity:0.5;filter:alpha(opacity=50);}
    #popup-dialog {z-index:101;display:none;position:fixed;left:50%;top:50%;padding:0px;margin:-150px -250px;width:500px;height:300px;border:2px solid black;background-color:white;box-shadow:3px 3px 3px #606060;}
    #dlg-title {font-size:20pt;background-color:black;color:white;padding:5px;margin:0px;}
    #dlg-message {height:70%;border:1px solid silver;padding:3px;margin:3px;font-size:10pt;overflow:auto;}
    #dlg-buttons {position:absolute;bottom:10px;width:100%;text-align:center;}
</style>

HTML

<div id="gray-out"></div>
<div id="popup-dialog">
    <h2 id="dlg-title"></h2>
    <div id="dlg-message"></div>
    <div id="dlg-buttons">
        <a href="javascript:hideDialog();">close</a>
    </div>
</div>