Buscar

Membuat Custom Prompt Boxes dengan Javascript

Contoh yang akan saya berikan adalah codingan sederhana untuk membuat custom prompt boxes dengan menggunakan javascript. Pada form tersebut, terdapat 3 tombol yg digunakan untuk mengubah teks, mengubah warna background, dan alert.
Langsung saja yu..Saya membuat 3 file. Diantaranya:
1) File example.html
<!DOCTYPE html> 
<html> 
<head> <meta charset="UTF-8"> 
<link rel="stylesheet" href="dialog.css"> 
<script src="dialog.js"></script> 
<script> 
function edit_teks(val){ 
 document.getElementById('status').innerHTML = val;
} 

function edit_warna(val){ 
 document.body.style.background = val; 
} 
</script> 

</head> 
<body> 
    <div id="dialogoverlay"></div> <div id="dialogbox"> <div>
     <div id="dialogboxhead"></div> <div id="dialogboxbody"></div> 
    <div id="dialogboxfoot"></div> </div> 
    </div> 
    <h1 id="status">Default Text</h1> 
    <button onclick="Prompt.render('Masukan Teks','edit_teks')">Edit Teks</button> 
    <button onclick="Prompt.render('Masukan Warna Background:','edit_warna')">Edit Warna Background</button> 
    <button onclick="Alert.render('Hello World')">Alert</button> 
</body> 
</html>
2) File dialog.js
function CustomAlert(){
 this.render = function(dialog){
  var winW = window.innerWidth;
     var winH = window.innerHeight;
  var dialogoverlay = document.getElementById('dialogoverlay');
     var dialogbox = document.getElementById('dialogbox');
  dialogoverlay.style.display = "block";
     dialogoverlay.style.height = winH+"px";
  dialogbox.style.left = (winW/2) - (550 * .5)+"px";
     dialogbox.style.top = "100px";
     dialogbox.style.display = "block";
  document.getElementById('dialogboxhead').innerHTML = "Alert";
     document.getElementById('dialogboxbody').innerHTML = dialog;
  document.getElementById('dialogboxfoot').innerHTML = '';
 }
 this.ok = function(){
  document.getElementById('dialogbox').style.display = "none";
  document.getElementById('dialogoverlay').style.display = "none";
 }
}
var Alert = new CustomAlert();

function CustomPrompt(){
 this.render = function(dialog,func){
  var winW = window.innerWidth;
     var winH = window.innerHeight;
  var dialogoverlay = document.getElementById('dialogoverlay');
     var dialogbox = document.getElementById('dialogbox');
  dialogoverlay.style.display = "block";
     dialogoverlay.style.height = winH+"px";
  dialogbox.style.left = (winW/2) - (550 * .5)+"px";
     dialogbox.style.top = "100px";
     dialogbox.style.display = "block";
  document.getElementById('dialogboxhead').innerHTML = "Dialog Box";
     document.getElementById('dialogboxbody').innerHTML = dialog;
  document.getElementById('dialogboxbody').innerHTML += '
'; document.getElementById('dialogboxfoot').innerHTML = ' '; } this.cancel = function(){ document.getElementById('dialogbox').style.display = "none"; document.getElementById('dialogoverlay').style.display = "none"; } this.ok = function(func){ var prompt_value1 = document.getElementById('prompt_value1').value; window[func](prompt_value1); document.getElementById('dialogbox').style.display = "none"; document.getElementById('dialogoverlay').style.display = "none"; } } var Prompt = new CustomPrompt();
3) File dialog.css
#dialogoverlay{
 display: none;
 opacity: .8;
 position: fixed;
 top: 0px;
 left: 0px;
 background: #FFF;
 width: 100%;
 z-index: 10;
}
#dialogbox{
 display: none;
 position: fixed;
 background: #000;
 border-radius:7px; 
 width:550px;
 z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background: #333; padding:20px; color:#FFF; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }
Outputnya
# Tampilan awal
# Jika klik button Edit Teks maka akan muncul :

# Jika klik button Edit Warna Background maka akan muncul :
# Jika klik button Alert maka akan muncul :
Semoga bermanfaat :)

0 comments:

Posting Komentar