here a useful source code for dialog box.


/* Javascript File */
var opacity = 0.1;
var closeDi = 0.9;

// fade in effect in 0.5 second
function openDialog(){

document.getElementById('dialog1').style.display = 'block';

var restart = setInterval(function(){
opacity = opacity + 0.1;
document.getElementById('dialog').style.opacity = opacity;

if(opacity >= 0.9){
clearInterval(restart);
opacity = 0.1;
}

},50);

}

// fade out effect in 0.5 second
function closeDialog(){

var restart = setInterval(function(){
closeDi = closeDi - 0.1;

document.getElementById('dialog1').style.opacity = closeDi;

if(closeDi <= 0.1){
clearInterval(restart);
document.getElementById('dialog').style.display = 'none';
closeDi = 0.9;
}

},50);

}

/* Javascript File */


/* CSS File */

.dialog{
width:500px;
background:#f0f0f0;
padding:5px;
position:absolute;
display:none;
opacity:0.1;
z-index:10000;
border-radius:10px;
box-shadow:5px 5px 20px #333,-5px 5px 20px #333,5px -5px 20px #333,-5px -5px 20px #333;
padding:5px 20px;
padding-right:30px;
padding-bottom:15px;
border:5px solid #333;
}
.dialog h1{
font-size:18px;
font-weight:100;
margin-bottom:20px;
border-bottom:1px solid #ccc;
}
.close{
position:absolute;
top:0px;
left:0px;
margin-right:20px;
padding-right:10px;
padding-left:5px;
margin:5px;
border-left:1px solid #00FFFF;
border-radius:10px;
cursor:pointer;
font-size:13px;
transition-duration:1s;
}

/* CSS File */

/* HTML File */

<!-- dialog box one -->
        <div class="dialog" id="dialog">
          <p class="close" onClick="closeDialog1()">close!</p>
             <h1>test</h1>
             <p>this is a test. this is a test. this is a test.
this is a test. this is a test.
this is a test.</p>
        </div>
        <!-- dialog box one -->

/* HTML File */