API tools faq
paste
Advertisement
val10

Untitled

val10
Sep 26th, 2013
73
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .divmsg {
  8.                 position: absolute;
  9.                 top: 50%;
  10.                 left: 50%;
  11.                 width:302px;
  12.                 height:181px;
  13.                 margin-left: -150px;
  14.                 margin-top: -90px;
  15.                 background:#f8f8f8;
  16.                 text-align:center;
  17.                 -webkit-user-select: none;  
  18.                 -moz-user-select: none;    
  19.                 -ms-user-select: none;      
  20.                 user-select: none;      
  21.             }
  22.             .top{
  23.                 display:none;
  24.                 position: absolute;
  25.                 width: 100%;
  26.                 height: 100%;
  27.                 background: url('background.jpg');
  28.             }
  29.             .header{
  30.                 text-align:left;
  31.                 background: #F0F0F0;
  32.                 height: 50px;
  33.             }
  34.  
  35.             .header_error{
  36.                 margin:14px 0 0 20px;
  37.                 float:left;
  38.                 COLOR:7f8488;
  39.                 font-family:arial;
  40.                 font-size: 15px;
  41.                 white-space:nowrap;
  42.                 width:6em;
  43.                 overflow:hidden;
  44.                 text-overflow:ellipsis;
  45.             }
  46.  
  47.             .header_x{
  48.                 margin:-14px 0px;
  49.                 float:right;
  50.                 font-weight:bold;
  51.                 COLOR:CECECE;
  52.                 font-family:arial;
  53.             }
  54.  
  55.             div.ok{
  56.                 width:95px;
  57.                 line-height: 36px;
  58.                 margin:20px 0 20px 98px;
  59.                 background:#c8c8c8;
  60.                 -webkit-user-select: none;  
  61.                 -moz-user-select: none;    
  62.                 -ms-user-select: none;      
  63.                 user-select: none;
  64.                 font-size:14px;
  65.                 font-family:arial;
  66.                 font-weight:bold;
  67.                 color:7f8488
  68.             }
  69.            
  70.             .text_msg{
  71.                 white-space:nowrap;
  72.                 width:15em;
  73.                 overflow:hidden;
  74.                 text-overflow:ellipsis;
  75.                 font-size:14px;
  76.                 margin:35px ;
  77.                 font-family:arial;
  78.             }
  79.         </style>
  80.         <div id="divbody">
  81.             <input type="button" value="Alert 1" onclick="alertBox.fclick('Go awayyyyyyyyyyyyyy', 'This is warning')" />
  82.            
  83.         </div>  
  84.     </head>
  85.     <body onload="alertBox.createContainer()">
  86.         <script type="text/javascript">
  87.             alertBox = {
  88.                 //create container of the div and background
  89.                 createContainer: function(){
  90.                     topDiv=document.createElement("DIV");
  91.                     topDiv.className="top";
  92.                     divmsg=document.createElement("DIV");
  93.                     divmsg.className="divmsg";
  94.                     document.body.appendChild(topDiv);
  95.                     topDiv.appendChild(divmsg);
  96.                     alertBox.createHeader();
  97.                 },
  98.                 //create header with ERROR text and image for X
  99.                 createHeader: function(){
  100.                     header=document.createElement("DIV");
  101.                     header.className="header";
  102.                     header_error=document.createElement("DIV");
  103.                     header_error.className="header_error";
  104.                     header_error.innerHTML="ERROR";
  105.                     header_x=document.createElement("DIV");
  106.                     header_x.className="header_x";
  107.                     header_x.onclick=alertBox.fclose;
  108.                     p1=document.createElement("P");
  109.                     img1=document.createElement("IMG");
  110.                     img1.src="X.jpg";
  111.                     header.appendChild(header_error);
  112.                     header.appendChild(header_x);
  113.                     header_x.appendChild(p1);
  114.                     p1.appendChild(img1);
  115.                     divmsg.appendChild(header);
  116.                     alertBox.createTextField();
  117.                 },
  118.                 //create text field
  119.                 createTextField: function(){
  120.                     text_msg=document.createElement("P");
  121.                     text_msg.className="text_msg";
  122.                     text_msg.innerHTML="Client not specified !";
  123.                     divmsg.appendChild(text_msg);
  124.                     alertBox.createOkBox();
  125.                 },
  126.                 //create OK div
  127.                 createOkBox: function(){
  128.                     div1=document.createElement("DIV");
  129.                     div1.className="ok";
  130.                     div1.onclick=alertBox.fclose;
  131.                     div1.innerHTML="OK";
  132.                     divmsg.appendChild(div1);
  133.                 },
  134.                 fclick: function (content, title) {
  135.                     var div = document.querySelector(".top");
  136.                     div.style.display = "block";
  137.                     document.querySelector(".header_error").innerHTML = title || 'Alert';
  138.                     document.querySelector(".text_msg").innerHTML = content;
  139.                 },
  140.                 fclose: function () {
  141.                     var div = document.querySelector(".top");
  142.                     div.style.display = "none";
  143.                 }
  144.             };
  145.         </script>
  146.     </body>
  147. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!