Simple JavaScript Dialog Box Playground

by Taufik Nurrohman

HTML

<link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/dialog-box/dialog-box.min.css">
<pre><code>// Fungsi penyalin kode Mindo Gaweni
function copy_code(id) {
    var ref = document.getElementById(id),
        code = ref.getElementsByTagName('code')[0].innerHTML;
    setDialog("open", {
        title: 'Kode Sumber',
        content: '&lt;pre&gt;' + code + '&lt;/pre&gt;',
        width: 600,
        height: 300
    });
}</code></pre>

CSS

pre {
    position:relative;
    padding:1em 1.4em;
    background-color:#eee;
    margin-right:30%;
    overflow:auto;
}

.help-text {
    display:block;
    position:absolute;
    top:0;
    right:.2em;
}

JavaScript

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://reader-download.googlecode.com/svn/trunk/dialog-box/dialog-box.min.js";
document.body.appendChild(script);


$('<a href="#" class="help-text">?</a>').on("click", function() {
    setDialog("open", {
        title: "Tentang",
        content: "Untuk menyalin kode, klik ganda pada area kode",
        buttons: {
            "Sip masbro!": function() {
                setDialog("close");
            }
        }
    });
    return false;
}).appendTo($('pre'));