HTML - - -
<div class='cPCShw cBSNo'>&nbsp;</div>
<div class='cPCdn cBSNo cEHd'>
<div class='cBTLck' title=' '>&nbsp;</div>
<div class='cBTUnl' title=' '>&nbsp;</div>
</div>
<div class='cBWTUnl'>
<div class='cWCls'>X</div>
<div class='cW'>
<div class='cRw'>
<div class='cLbl'></div>
<input name='sPsw' class='cNpt' type='password'></input>
</div>
<div class='cRw'>
<div class='cLbl'> </div>
<textarea name='sTxt' class='cTAr'></textarea>
</div>
<div class='cRw'>
<input name='sBAcp' class='cSBtn' type='button' value=''></input>
<input name='sBCnl' class='cSBtn' type='button' value=''></input>
</div>
<div class='cRw cEHd'>
<div class='cLbl'></div>
<textarea name='sCd' class='cTAr cTxt'></textarea>
</div>
<div class='cRw cEHd'>
<input name='sBOk' class='cSBtn' type='button' value='OK'></input>
</div>
</div>
</div>
<div class='cBWTLck'>
<div class='cWCls'>X</div>
<div class='cW'>
<div class='cRw'>
<div class='cLbl'></div>
<input name='sPsw' class='cNpt' type='password'></input>
</div>
<div class='cRw'>
<div class='cLbl'></div>
<textarea name='sTxt' class='cTAr'></textarea>
</div>
<div class='cRw'>
<input name='sBAcp' class='cSBtn' type='button' value=''></input>
<input name='sBCnl' class='cSBtn' type='button' value=''></input>
</div>
<div class='cRw cEHd'>
<div class='cLbl'> </div>
<input name='sLnk' class='cNpt' type='text'></input>
</div>
<div class='cRw cEHd'>
<div class='cLbl'> </div>
<textarea name='sCd' class='cTAr'></textarea>
</div>
<div class='cRw cEHd'>
<input name='sBOk' class='cSBtn' type='button' value='OK'></input>
</div>
</div>
</div>
- - - HTML

CSS - - -
.cPCdn {
margin: 0;
padding: 10px;
position: absolute;
top: 0;
right: 20px;
width: 120px;
height: 50px;
background-color: #fff;
border: 1px solid #aaa;
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px;
cursor: pointer;
}

.cPCShw {
margin: 0;
padding: 10px;
position: absolute;
top: 0;
right: 20px;
width: 120px;
height: 10px;
background-color: #fff;
border: 1px solid #aaa;
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px;
cursor: pointer;
}

// - - - -
.cBWTLck { 
padding: 33px 11px 11px 11px;
height: 225px;
width: 360px;
position: fixed;
display: none;
z-index: 200;
font-style: normal;
// - - - -
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5); /*  Firefox */
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5); /*  Safari  Chrome */
box-shadow: 0 0 15px rgba(0,0,0,0.5); /*   */
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius: 8px;
background-color: #fff;
}

.cWCls { // WCls - window close
margin: 0;
padding: 0;
position: absolute;
display: inline-block;
text-align: center;
top: 8px;
right: 10px;
width: 20px;
height: 20px;
font-family: Tahoma, Verdana;
font-size: 14px;
color: #999;
font-weight: bold;
background-color: #fff;
cursor: pointer;
z-index: 15;
border: 1px solid #999;
-webkit-border-radius: 8px; 
-moz-border-radius: 8px;  
border-radius: 8px;
}
.cWCls:hover { 
border: 1px solid #555;
color: #111;
}
// - - - -

.cBWTLck .cRw {
  margin: 0;
  padding: 8px 5px;
  //width: 340px;
}

.cBWTLck .cLbl {
margin: 0;
padding: 3px 0 3px 5px;
  font-family: Verdana, Tahoma, 'MS Sans Serif';
  font-size: 14px;
  color: #111;
}

.cBWTLck input.cNpt {
  margin: 0;
  padding: 4px 3px;
  width: 350px;
  font-family: Verdana, 'MS Sans Serif';
  font-size: 14px;
  color: #000000;
border: 1px solid #999;
-webkit-border-radius: 5px; 
 -moz-border-radius: 5px; 
 border-radius: 5px;
}

.cBWTLck textarea.cTAr {
  margin: 0;
  padding: 4px 3px;
  height: 65px;
  width: 350px;
  font-family: Verdana, 'MS Sans Serif';
  font-size: 14px;
  color: #000000;
border: 1px solid #999;
-webkit-border-radius: 5px; 
 -moz-border-radius: 5px; 
 border-radius: 5px;
}
.cBWTLck textarea.cTAr:active {
border: 1px solid #999;
-webkit-border-radius: 5px; 
 -moz-border-radius: 5px; 
 border-radius: 5px;
}

.cBTLck {
margin: 10px;
padding: 0;
display: inline-block;
position: absolute;
top: 5px;
right: 5px;
box-shadow: inset 0 -1px 3px rgba(0,0,0,0.25), inset 0 1px 3px rgba(255,255,255,0.25);
background: no-repeat 50% 50%;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjA4ZXKc4QAAAXpJREFUSEtjYBgkgBnoDgUGloJCBpb8IiBbFYhZqeU2Tga2+R8YOI79R8EgMQYGQUot0WRgX/cTbDBr014GlvJsBpaqDAbWhoNgMba5nxhYa9OAljCSYxEnA2vXBbBBLGU5QAOYUAxhbUqCWNx2FSjOT7oFIJeCDei8iFMzyFdgB1RkkWEBMELBmnPKcGoG+QysBqiWZADSREgzXE1RPsnmg11FtAUluRRYAE732AHcEYPbAjwRSKoPpKSkGIEYlN4NMHIuek5G5wP1CAsLswMxC84g5ebmZmViy64EG87AkA3MsclEYZBaoB5G1sQ2dnZ2PnwRzgY1vIDkVMEcNgWqF2+uhliAmXFAwdYMDzYGhgYMB8Dig0CxgdsCSLBBADIbJkaJBf\/\/\/2cAYbjBQ9sCiOsdyI8DZu+VWMMYGvpAih1rCgNZzOS6HSiHOxWBMgkQc8BTC3PIdAZiMDTTubq6MoAwcYDZfwHRuRmkFgiAhjMSbwFxziCoCgBYdu5kMUcj9gAAAABJRU5ErkJggg==");
cursor: pointer;
// - - - -
width: 32px;
height: 32px;
vertical-align: text-bottom;
// - - - -
-webkit-border-radius: 5px; 
-moz-border-radius: 5px;  
border-radius: 5px;
}
.cBTLck:hover {
box-shadow: inset 0 0 7px 0 #99c;
}

.cBWTLck input.cSBtn {
  margin: 0 10px 0 0;
  padding: 3px 15px;
  background:#70ac55;
  background:-webkit-linear-gradient(top,#afe09b,#70ac55 70%);
  background:-moz-linear-gradient(top,#afe09b,#70ac55 70%);
  background:-o-linear-gradient(top,#afe09b,#70ac55 70%);
  border: 1px solid #E6EEE7;
  border-color:#477433 #487534 #497634;
  color:#fff !important;text-shadow:0 -1px 0 #467331;
  cursor: pointer;
  font-family: Verdana, 'MS Sans Serif';
  font-size: 14px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.cBWTLck input.cSBtn:hover {
  background:#58963b;
  background:-webkit-linear-gradient(top,#9ace85,#58963b);
  background:-moz-linear-gradient(top,#9ace85,#58963b);
  background:-o-linear-gradient(top,#9ace85,#58963b);
  border-color:#2d5c17 #2d5d18 #2e5e18;
}

.cBWTLck input.cSBtn:active {
  background:#75b05b;
  background:-webkit-linear-gradient(top,#75b05b,#539335);
  background:-moz-linear-gradient(top,#75b05b,#539335);
  background:-o-linear-gradient(top,#75b05b,#539335);
  border-color:#2e5e19;
}

.cBWTLck .cTBlc {
margin: 0;
padding: 3px 5px;
display: inline-block;
height: 65px;
width: 335px;
font-family: Verdana, Tahoma, 'MS Sans Serif';
font-size: 14px;
color: #111;
white-space: pre;
overflow: auto;
border: 1px dashed #999;
-webkit-border-radius: 5px; 
 -moz-border-radius: 5px; 
 border-radius: 5px;
}

.cEHd { // EHd = Element Hide
display: none;
}

// - - - -
.cBWTUnl { 
padding: 33px 11px 11px 11px;
height: 225px;
width: 360px;
position: fixed;
display: none;
z-index: 250;
font-style: normal;
// - - - -
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5); /*  Firefox */
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5); /*  Safari  Chrome */
box-shadow: 0 0 15px rgba(0,0,0,0.5); /*   */
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius: 8px;
background-color: #fff;
}

.cWCls { // WCls - window close
margin: 0;
padding: 0;
position: absolute;
display: inline-block;
text-align: center;
top: 8px;
right: 10px;
width: 20px;
height: 20px;
font-family: Tahoma, Verdana;
font-size: 14px;
color: #999;
font-weight: bold;
background-color: #fff;
cursor: pointer;
z-index: 15;
border: 1px solid #999;
-webkit-border-radius: 8px; 
-moz-border-radius: 8px;  
border-radius: 8px;
}
.cWCls:hover { 
border: 1px solid #555;
color: #111;
}
// - - - -

.cBWTUnl .cRw {
  margin: 0;
  padding: 8px 5px;
  //width: 340px;
}

.cBWTUnl .cLbl {
margin: 0;
padding: 3px 0 3px 5px;
  font-family: Verdana, Tahoma, 'MS Sans Serif';
  font-size: 14px;
  color: #111;
}

.cBWTUnl input.cNpt {
  margin: 0;
  padding: 4px 3px;
  width: 350px;
  font-family: Verdana, 'MS Sans Serif';
  font-size: 14px;
  color: #000000;
border: 1px solid #999;
-webkit-border-radius: 5px; 
 -moz-border-radius: 5px; 
 border-radius: 5px;
}

.cBWTUnl textarea.cTAr {
  margin: 0;
  padding: 4px 3px;
  height: 65px;
  width: 350px;
  font-family: Verdana, 'MS Sans Serif';
  font-size: 14px;
  color: #000000;
border: 1px solid #999;
-webkit-border-radius: 5px; 
 -moz-border-radius: 5px; 
 border-radius: 5px;
}
.cBWTUnl textarea.cTAr:active {
border: 1px solid #999;
-webkit-border-radius: 5px; 
 -moz-border-radius: 5px; 
 border-radius: 5px;
}
.cBWTUnl textarea.cTxt {
  height: 120px;
}

.cBTUnl {
margin: 10px;
padding: 0;
display: inline-block;
position: absolute;
top: 5px;
left: 5px;
box-shadow: inset 0 -1px 3px rgba(0,0,0,0.25), inset 0 1px 3px rgba(255,255,255,0.25);
background: no-repeat 50% 50%;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjA4ZXKc4QAAAZZJREFUSEtjZCAT/P\/\/H0MnIyMjUaYxA1UpMLAUFDKw5BcB2apAzIquE2QBOibGdE4GtvkfGDiO/UfBIDEGBkFkA8ixQJOBfd1PsMGsTXsZWMqzGViqMhhYGw6CxdjmfmJgrU0DWgIOB1It4GRg7boANoilLAeonwnFu6xNSRCL264CxflJtwDkUrABnRdxhiPIV2AHVGSRYQEwQsGac8pwWgDyGVgNUC3JQQTShKQZqyVwNUX5NLagJJcCC8DpHjuA+2AwWoCcpmniA2xZXkpKihGIQfnBACNno+d0dD5Qj7CwMDsQs8AdjO4Lbm5uVia27Eqw4QwM2cAcnUwUBqkF6mFkTWxjZ2fnw2kBUIINangBMYUYihrmsClQveBcDwZY4gFiATRjIRkACrZmeLAxMDRgOACW4qDFCukWQIINApDZMDEKLUA1eGhbAHG9A/lxwOy9EmsYQwMJSLFjTWEgi5lctwPlcKciUCYBYg54amEOmc5ADIZlOnSb8RYXzP4LiM7NILVA4OrqitrEIKo8whoe+AUBaO/1ZfPVdSgAAAAASUVORK5CYII=");
cursor: pointer;
// - - - -
width: 32px;
height: 32px;
vertical-align: text-bottom;
// - - - -
-webkit-border-radius: 5px; 
-moz-border-radius: 5px;  
border-radius: 5px;
}
.cBTUnl:hover {
box-shadow: inset 0 0 7px 0 #99c;
}

.cBWTUnl input.cSBtn {
  margin: 0 10px 0 0;
  padding: 3px 15px;
  background:#70ac55;
  background:-webkit-linear-gradient(top,#afe09b,#70ac55 70%);
  background:-moz-linear-gradient(top,#afe09b,#70ac55 70%);
  background:-o-linear-gradient(top,#afe09b,#70ac55 70%);
  border: 1px solid #E6EEE7;
  border-color:#477433 #487534 #497634;
  color:#fff !important;text-shadow:0 -1px 0 #467331;
  cursor: pointer;
  font-family: Verdana, 'MS Sans Serif';
  font-size: 14px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.cBWTUnl input.cSBtn:hover {
  background:#58963b;
  background:-webkit-linear-gradient(top,#9ace85,#58963b);
  background:-moz-linear-gradient(top,#9ace85,#58963b);
  background:-o-linear-gradient(top,#9ace85,#58963b);
  border-color:#2d5c17 #2d5d18 #2e5e18;
}

.cBWTUnl input.cSBtn:active {
  background:#75b05b;
  background:-webkit-linear-gradient(top,#75b05b,#539335);
  background:-moz-linear-gradient(top,#75b05b,#539335);
  background:-o-linear-gradient(top,#75b05b,#539335);
  border-color:#2e5e19;
}

.cBWTUnl .cTBlc {
margin: 0;
padding: 3px 5px;
display: inline-block;
height: 120px;
width: 335px;
font-family: Verdana, Tahoma, 'MS Sans Serif';
font-size: 14px;
color: #111;
white-space: pre;
overflow: auto;
border: 1px dashed #999;
-webkit-border-radius: 5px; 
 -moz-border-radius: 5px; 
 border-radius: 5px;
}

.cEHd { // EHd = Element Hide
display: none;
}

.cBSNo,
.cBSNo * { // BSNo = Body Select No
-moz-user-select:none;
-webkit-user-select: none;    
-khtml-user-select:none;
user-select:none;
}
- - - CSS

JS - - -
var ogWTLck = { // WInf - window information
bPrc: 0, // Prc - processing
bVRsl: 0, // VRsl - view result

//     - - -
mthWSPst: function() { // mthWSPst - window set position
  oBWnd = $('.cBWTLck');
  // - - - -
  //      - - - 
  iW = $(document).width();
  iH = $(window).height();
  iL = (iW - 400) / 2;
  iT = (iH - 225) / 2;
  // - - - -
  oBWnd.css('left', '' +iL+ 'px');
  oBWnd.css('top', '' +iT+ 'px');
  // - - -
},
// - - -

//    - - -
mthWClr: function() { // WClr - window clear
  if(ogWTLck.bVRsl == 1) {
    $('.cBWTLck .cRw').toggleClass('cEHd');
    ogWTLck.bVRsl = 0;
  }
  $('.cBWTLck input[type=text]').val('');
  $('.cBWTLck input[type=password]').val('');
  $('.cBWTLck textarea').val('');
},
// - - -

mthWSh: function() {
  //     - - -
  oWTUnl = $('.cBWTUnl');
  if(oWTUnl.size() > 0)
oWTUnl.css('display', 'none');
  // - - -
  ogWTLck.mthWClr();
  oBWnd = $('.cBWTLck');
  //    
  ogWTLck.mthWSPst();
  oBWnd.css('display', 'inline-block');
  oBWnd.find('input[name=sPsw]').focus();
},

//    "" - - -
mthAcp: function() { // Acp - accept
  if(ogWTLck.bPrc == 1)
return;
  ogWTLck.bPrc = 1;
  // - - - -
  oDt = {},
  sPth = '/aj_cdn';
  oDt['sTrg'] = 'add';
  oDt['bAj'] = 1;
  oDt['sPsw'] = $('.cBWTLck input[name=sPsw]').val();
  oDt['sTxt'] = $('.cBWTLck textarea[name=sTxt]').val();
  
  $.post(sPth, oDt, 
function(sRs) {
  oRs = JSONparse(sRs);

  //    - - - 
  if((oRs.r == 1) && 
(oRs.m != '')) {
    $('.cBWTLck .cRw').toggleClass('cEHd');
    $('.cBWTLck input[name=sLnk]').val(oRs.m);
    $('.cBWTLck textarea[name=sCd]').val(oRs.d);
    ogWTLck.bVRsl = 1;
  }
  // - - -
  ogWTLck.bPrc = 0;
}, 'text');
},
// - - -

//    "" - - -
mthALnk: function(oEvn) { // ALnk - accept link
  if(oEvn.which == 13) 
ogWTLck.mthAcp();
},
// - - -

//     ""  - - -
evnAcp: function() {
  $('.cBWTLck input[name=sBAcp]').off().on('click', ogWTLck.mthAcp);
  $('.cBWTLck input[name=sPsw]').off('keydown').on('keydown', ogWTLck.mthALnk);
},
// - - -

//   - - -
mthWCls: function() {
  $('.cBWTLck').css('display', 'none');
},
// - - -

//      - - -
evnCls: function() {
  $('.cBWTLck .cWCls, .cBWTLck input[name=sBCnl], .cBWTLck input[name=sBOk]').off().on('click', ogWTLck.mthWCls);
}
// - - -
};


// - - - -
var ogWTUnl = { // WInf - window information
bPrc: 0, // Prc - processing
bVRsl: 0, // VRsl - view result

//     - - -
mthWSPst: function() { // mthWSPst - window set position
  oBWnd = $('.cBWTUnl');
  // - - - -
  //      - - - 
  iW = $(document).width();
  iH = $(window).height();
  iL = (iW - 400) / 2;
  iT = (iH - 225) / 2;
  // - - - -
  oBWnd.css('left', '' +iL+ 'px');
  oBWnd.css('top', '' +iT+ 'px');
  // - - -
},
// - - -

//    - - -
mthWClr: function() { // WClr - window clear
  if(ogWTUnl.bVRsl == 1) {
    $('.cBWTUnl .cRw').toggleClass('cEHd');
    ogWTUnl.bVRsl = 0;
  }
  $('.cBWTUnl input[type=text]').val('');
  $('.cBWTUnl input[type=password]').val('');
  $('.cBWTUnl textarea').val('');
},
// - - -

mthWSh: function() {
  //     - - -
  oWTLck = $('.cBWTLck');
  if(oWTLck.size() > 0)
oWTLck.css('display', 'none');
  // - - -
  ogWTUnl.mthWClr();
  oBWnd = $('.cBWTUnl');
  //    
  ogWTUnl.mthWSPst();
  oBWnd.css('display', 'inline-block');
  oBWnd.find('input[name=sPsw]').focus();
},

//    "" - - -
mthAcp: function() { // Acp - accept
  if(ogWTUnl.bPrc == 1)
return;
  ogWTUnl.bPrc = 1;
  // - - - -
  oDt = {},
  sPth = '/aj_cdn';
  oDt['sTrg'] = 'dc2';
  oDt['bAj'] = 1;
  oDt['sPsw'] = $('.cBWTUnl input[name=sPsw]').val();
  oDt['sTxt'] = $('.cBWTUnl textarea[name=sTxt]').val();
  
  $.post(sPth, oDt, 
function(sRs) {
  oRs = JSONparse(sRs);

  //    - - - 
  if((oRs.r == 1) && 
(oRs.m != '')) {
    $('.cBWTUnl .cRw').toggleClass('cEHd');
    $('.cBWTUnl textarea[name=sCd]').val(oRs.m);
    ogWTUnl.bVRsl = 1;
  }
  // - - -
  $('.cBWTUnl input[name=sPsw]').val('');
  ogWTUnl.bPrc = 0;
}, 'text');
},
// - - -

//    "" - - -
mthALnk: function(oEvn) { // ALnk - accept link
  if(oEvn.which == 13) 
ogWTUnl.mthAcp();
},
// - - -

//     ""  - - -
evnAcp: function() {
  $('.cBWTUnl input[name=sBAcp]').off().on('click', ogWTUnl.mthAcp);
  $('.cBWTUnl input[name=sPsw]').off('keydown').on('keydown', ogWTUnl.mthALnk);
},
// - - -

//   - - -
mthWCls: function() {
  $('.cBWTUnl').css('display', 'none');
},
// - - -

//      - - -
evnCls: function() {
  $('.cBWTUnl .cWCls, .cBWTUnl input[name=sBCnl], .cBWTUnl 

input[name=sBOk]').off().on('click', ogWTUnl.mthWCls);
}
// - - -
};


$( function() { 

  $('.cPCShw').on('click', 
function() {
  $('.cPCdn, .cPCShw').toggleClass('cEHd');
});

  $('.cPCdn').on('dblclick', 
function() {
  $('.cPCdn, .cPCShw').toggleClass('cEHd');
});
  // - - - -
  $('.cBTLck').on('click', ogWTLck.mthWSh);
  ogWTLck.evnCls();
  ogWTLck.evnAcp();
  // - - - -
  $('.cBTUnl').on('click', ogWTUnl.mthWSh);
  ogWTUnl.evnCls();
  ogWTUnl.evnAcp();

});
- - - JS