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.jsfunction 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 :)
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
