By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,919 Members | 1,587 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,919 IT Pros & Developers. It's quick & easy.

Js double input(username,password) pop up box.

P: 2
I want to add a Js login page on my site. But with var=prompt("x","x"); in js show only one input box in my site . I want a Js code that pop up a box that can be use as a login page.
or give me a code that can disply two input field in this code.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <p>Click the button to demonstrate the prompt box.</p>
  6.  
  7. <button onclick="myFunction()">Try it</button>
  8.  
  9. <p id="demo"></p>
  10.  
  11. <script>
  12. function myFunction() {
  13.     var person = prompt("Please enter your name", "Harry Potter");
  14.  
  15.     if (person != null) {
  16.         document.getElementById("demo").innerHTML =
  17.         "Hello " + person + "! How are you today?";
  18.     }
  19. }
  20. </script>
  21.  
  22. </body>
  23. </html>
Nov 8 '14 #1
Share this Question
Share on Google+
4 Replies


Dormilich
Expert Mod 5K+
P: 8,639
kindly check out jQueryUI, this has such prompt boxes.
Nov 10 '14 #2

P: 17
I'm not sure I understand the need for a library solution
when you could create a quick and dirty solution like this...

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <style type="text/css">
  4. #login { 
  5.   display:none;  z-index:5;
  6.   height:200px;  width:300px;
  7.   position:absolute; top:200px;  left:300px; 
  8. }
  9. </style>
  10. <body>
  11.  
  12. <p>Click the button to demonstrate the prompt box.</p>
  13.  
  14. <button onclick="myFunction()">Try it</button>
  15.  
  16. <div id="login">
  17. Login: <input type="text" id="loginName" value=""><p>
  18. Password: <input type="password" id="loginPswd" value=""><p>
  19. <button onclick="Submit()">Submit</button>
  20. <button onclick="Cancel()">Cancel</button>
  21. </div>
  22.  
  23. <p id="demo"></p>
  24.  
  25. <script>
  26. function myFunction() {
  27.   document.getElementById('loginName').value = '';
  28.   document.getElementById('loginPswd').value = '';
  29.   document.getElementById('login').style.display = 'block';
  30. }
  31. function Submit() {
  32.   document.getElementById('login').style.display = 'none';
  33.   alert('Checks of login information performed here');
  34. }
  35. function Cancel() {
  36.   document.getElementById('loginName').value = '';
  37.   document.getElementById('loginPswd').value = '';
  38.   document.getElementById('login').style.display = 'none';
  39. }
  40. </script>
  41.  
  42. </body>
  43. </html>
  44.  
Jan 1 '15 #3

Exequiel
100+
P: 287
You can try this code.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <title>Zick Login Sample</title>
  4. <head>
  5. <style>
  6. html, body{padding:0px; margin:0px;}
  7. #loginBG{
  8.     background:rgba(1,1,1,0.3);
  9.     height:100%;
  10.     width:100%;
  11.     position:fixed;
  12.     float:none;
  13.     z-index:1;
  14.     top:0;
  15.     font-family:Arial, Helvetica, sans-serif;
  16. }
  17. .loginwrapper{
  18.     background:#FFF;
  19.     padding:10px;
  20.     margin: 0px auto;
  21.     width: 400px;
  22.     margin-top:20px;
  23.     border-radius:5px;
  24.     box-shadow:0px 2px 2px rgba(1,1,1,0.4);
  25. }
  26. .fieldset{
  27.     padding:20px;    
  28.     border-radius:5px;
  29.     border:1px solid #333;
  30. }
  31. .fieldset legend{font-weight:bold; padding: 5px;}
  32. .fieldset table{paddng:0px; margin:0px; margin-bottom:10px; width:100%;}
  33. .fieldset table tr td{
  34.     font-weight:bold;
  35.     padding:0px;
  36. }
  37. .close {
  38.   float: right;
  39.   font-size: 20px;
  40.   font-weight: bold;
  41.   line-height: 20px;
  42.   color: #000000;
  43.   text-shadow: 0 1px 0 #ffffff;
  44.   opacity: 0.2;
  45.   filter: alpha(opacity=20);
  46. }
  47. .close:hover,
  48. .close:focus {
  49.   color: #000000;
  50.   text-decoration: none;
  51.   cursor: pointer;
  52.   opacity: 0.4;
  53.   filter: alpha(opacity=40);
  54. }
  55. button.close {
  56.   padding: 0;
  57.   cursor: pointer;
  58.   background: transparent;
  59.   border: 0;
  60.   -webkit-appearance: none;
  61. }
  62. .btn {
  63.   display: inline-block;
  64.   *display: inline;
  65.   padding: 4px 12px;
  66.   margin-bottom: 0;
  67.   *margin-left: .3em;
  68.   font-size: 14px;
  69.   line-height: 20px;
  70.   color: #333333;
  71.   text-align: center;
  72.   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  73.   vertical-align: middle;
  74.   cursor: pointer;
  75.   background-color: #f5f5f5;
  76.   *background-color: #e6e6e6;
  77.   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  78.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  79.   background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  80.   background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  81.   background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  82.   background-repeat: repeat-x;
  83.   border: 1px solid #cccccc;
  84.   *border: 0;
  85.   border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  86.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  87.   border-bottom-color: #b3b3b3;
  88.   -webkit-border-radius: 4px;
  89.      -moz-border-radius: 4px;
  90.           border-radius: 4px;
  91.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  92.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  93.   *zoom: 1;
  94.   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  95.      -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  96.           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  97. }
  98. .btn:hover,
  99. .btn:focus,
  100. .btn:active,
  101. .btn.active,
  102. .btn.disabled,
  103. .btn[disabled] {
  104.   color: #333333;
  105.   background-color: #e6e6e6;
  106.   *background-color: #d9d9d9;
  107. }
  108. .btn:active,
  109. .btn.active {
  110.   background-color: #cccccc \9;
  111. }
  112. .btn:first-child {
  113.   *margin-left: 0;
  114. }
  115. .btn:hover,
  116. .btn:focus {
  117.   color: #333333;
  118.   text-decoration: none;
  119.   background-position: 0 -15px;
  120.   -webkit-transition: background-position 0.1s linear;
  121.      -moz-transition: background-position 0.1s linear;
  122.        -o-transition: background-position 0.1s linear;
  123.           transition: background-position 0.1s linear;
  124. }
  125. .btn:focus {
  126.   outline: thin dotted #333;
  127.   outline: 5px auto -webkit-focus-ring-color;
  128.   outline-offset: -2px;
  129. }
  130. .btn.active,
  131. .btn:active {
  132.   background-image: none;
  133.   outline: 0;
  134.   -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  135.      -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  136.           box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  137. }
  138. .btn-primary.active,
  139. .btn-warning.active,
  140. .btn-danger.active,
  141. .btn-success.active,
  142. .btn-info.active,
  143. .btn-inverse.active {
  144.   color: rgba(255, 255, 255, 0.75);
  145. }
  146. .btn-primary {
  147.   color: #ffffff;
  148.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  149.   background-color: #006dcc;
  150.   *background-color: #0044cc;
  151.   background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  152.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  153.   background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  154.   background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  155.   background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  156.   background-repeat: repeat-x;
  157.   border-color: #0044cc #0044cc #002a80;
  158.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  159.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  160.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  161. }
  162. .btn-primary:hover,
  163. .btn-primary:focus,
  164. .btn-primary:active,
  165. .btn-primary.active,
  166. .btn-primary.disabled,
  167. .btn-primary[disabled] {
  168.   color: #ffffff;
  169.   background-color: #0044cc;
  170.   *background-color: #003bb3;
  171. }
  172. .btn-primary:active,
  173. .btn-primary.active {
  174.   background-color: #003399 \9;
  175. }
  176. .btn-warning {
  177.   color: #ffffff;
  178.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  179.   background-color: #faa732;
  180.   *background-color: #f89406;
  181.   background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  182.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  183.   background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  184.   background-image: -o-linear-gradient(top, #fbb450, #f89406);
  185.   background-image: linear-gradient(to bottom, #fbb450, #f89406);
  186.   background-repeat: repeat-x;
  187.   border-color: #f89406 #f89406 #ad6704;
  188.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  189.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
  190.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  191. }
  192. .btn-warning:hover,
  193. .btn-warning:focus,
  194. .btn-warning:active,
  195. .btn-warning.active,
  196. .btn-warning.disabled,
  197. .btn-warning[disabled] {
  198.   color: #ffffff;
  199.   background-color: #f89406;
  200.   *background-color: #df8505;
  201. }
  202. .btn-warning:active,
  203. .btn-warning.active {
  204.   background-color: #c67605 \9;
  205. }
  206. .btn-danger {
  207.   color: #ffffff;
  208.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  209.   background-color: #da4f49;
  210.   *background-color: #bd362f;
  211.   background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
  212.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
  213.   background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
  214.   background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
  215.   background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
  216.   background-repeat: repeat-x;
  217.   border-color: #bd362f #bd362f #802420;
  218.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  219.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
  220.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  221. }
  222. .btn-danger:hover,
  223. .btn-danger:focus,
  224. .btn-danger:active,
  225. .btn-danger.active,
  226. .btn-danger.disabled,
  227. .btn-danger[disabled] {
  228.   color: #ffffff;
  229.   background-color: #bd362f;
  230.   *background-color: #a9302a;
  231. }
  232. .btn-danger:active,
  233. .btn-danger.active {
  234.   background-color: #942a25 \9;
  235. }
  236. .btn-success {
  237.   color: #ffffff;
  238.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  239.   background-color: #5bb75b;
  240.   *background-color: #51a351;
  241.   background-image: -moz-linear-gradient(top, #62c462, #51a351);
  242.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  243.   background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  244.   background-image: -o-linear-gradient(top, #62c462, #51a351);
  245.   background-image: linear-gradient(to bottom, #62c462, #51a351);
  246.   background-repeat: repeat-x;
  247.   border-color: #51a351 #51a351 #387038;
  248.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  249.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
  250.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  251. }
  252. .btn-success:hover,
  253. .btn-success:focus,
  254. .btn-success:active,
  255. .btn-success.active,
  256. .btn-success.disabled,
  257. .btn-success[disabled] {
  258.   color: #ffffff;
  259.   background-color: #51a351;
  260.   *background-color: #499249;
  261. }
  262. .btn-success:active,
  263. .btn-success.active {
  264.   background-color: #408140 \9;
  265. }
  266. .btn-info {
  267.   color: #ffffff;
  268.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  269.   background-color: #49afcd;
  270.   *background-color: #2f96b4;
  271.   background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  272.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  273.   background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  274.   background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  275.   background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
  276.   background-repeat: repeat-x;
  277.   border-color: #2f96b4 #2f96b4 #1f6377;
  278.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  279.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
  280.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  281. }
  282. .btn-info:hover,
  283. .btn-info:focus,
  284. .btn-info:active,
  285. .btn-info.active,
  286. .btn-info.disabled,
  287. .btn-info[disabled] {
  288.   color: #ffffff;
  289.   background-color: #2f96b4;
  290.   *background-color: #2a85a0;
  291. }
  292. .btn-info:active,
  293. .btn-info.active {
  294.   background-color: #24748c \9;
  295. }
  296. .btn-inverse {
  297.   color: #ffffff;
  298.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  299.   background-color: #363636;
  300.   *background-color: #222222;
  301.   background-image: -moz-linear-gradient(top, #444444, #222222);
  302.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
  303.   background-image: -webkit-linear-gradient(top, #444444, #222222);
  304.   background-image: -o-linear-gradient(top, #444444, #222222);
  305.   background-image: linear-gradient(to bottom, #444444, #222222);
  306.   background-repeat: repeat-x;
  307.   border-color: #222222 #222222 #000000;
  308.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  309.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
  310.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  311. }
  312. .btn-inverse:hover,
  313. .btn-inverse:focus,
  314. .btn-inverse:active,
  315. .btn-inverse.active,
  316. .btn-inverse.disabled,
  317. .btn-inverse[disabled] {
  318.   color: #ffffff;
  319.   background-color: #222222;
  320.   *background-color: #151515;
  321. }
  322. .btn-inverse:active,
  323. .btn-inverse.active {
  324.   background-color: #080808 \9;
  325. }
  326. button.btn,
  327. input[type="submit"].btn {
  328.   *padding-top: 3px;
  329.   *padding-bottom: 3px;
  330. }
  331. button.btn::-moz-focus-inner,
  332. input[type="submit"].btn::-moz-focus-inner {
  333.   padding: 0;
  334.   border: 0;
  335. }
  336. button.btn.btn-large,
  337. input[type="submit"].btn.btn-large {
  338.   *padding-top: 7px;
  339.   *padding-bottom: 7px;
  340. }
  341. button.btn.btn-small,
  342. input[type="submit"].btn.btn-small {
  343.   *padding-top: 3px;
  344.   *padding-bottom: 3px;
  345. }
  346. button.btn.btn-mini,
  347. input[type="submit"].btn.btn-mini {
  348.   *padding-top: 1px;
  349.   *padding-bottom: 1px;
  350. }
  351. input[type="text"],
  352. input[type="password"]{
  353.     display: inline-block;
  354.   height: 20px;
  355.   padding: 4px 6px;
  356.   margin-bottom: 10px;
  357.   font-size: 14px;
  358.   line-height: 20px;
  359.   color: #555555;
  360.   vertical-align: middle;
  361.   -webkit-border-radius: 4px;
  362.      -moz-border-radius: 4px;
  363.           border-radius: 4px;
  364. }
  365. input[type="text"],
  366. input[type="password"]{
  367.      background-color: #ffffff;
  368.   border: 1px solid #cccccc;
  369.   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  370.      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  371.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  372.   -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  373.      -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  374.        -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  375.           transition: border linear 0.2s, box-shadow linear 0.2s;
  376. }
  377. input[type="text"]:focus,
  378. input[type="password"]:focus{
  379.     border-color: rgba(82, 168, 236, 0.8);
  380.     outline: 0;
  381.     outline: thin dotted \9;
  382.     /* IE6-9 */
  383.     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  384.      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  385.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  386. }
  387. .fullwidth{
  388.     width:100%;
  389. }
  390. </style>
  391. <script>
  392. function Login() 
  393. {
  394.     var usrnm = document.getElementById("usrnm").value;
  395.     var pwd = document.getElementById("pwd").value;
  396.  
  397.     if(usrnm != "" && pwd != "")
  398.     {
  399.         document.getElementById("demo").innerHTML = "Hello " + usrnm + "! How are you today? <br> Your password is "+pwd;
  400.         closemodal();//close the login modal
  401.     }
  402. }
  403. function showmodal(){
  404.     document.getElementById("loginBG").style.display="block";
  405. }
  406. function closemodal(){
  407.     document.getElementById("loginBG").style.display="none";
  408. }
  409. </script>
  410. </head>
  411. <body>
  412.  
  413. <p>Click the button to demonstrate the prompt box.</p>
  414. <button onclick="showmodal()">Try it</button>
  415. <div id="demo"></div>
  416.  
  417. <div id="loginBG" style="display:none;">
  418.     <div id="loginwrapper" class="loginwrapper">
  419.         <div align="right" style="float:right;margin-right:7px; margin-bottom:6px; margin-top:-2px;">
  420.             <button type="button" class="close" onclick="closemodal()" style="position:absolute;" title="Close">
  421.                 <span aria-hidden="true">&times;</span>
  422.             </button>
  423.         </div>
  424.          <div style="clear:both; padding:0px;"></div>
  425.         <fieldset class="fieldset">
  426.             <legend>LOGIN</legend>
  427.                 <form method="post" action="javascript:;">
  428.                     <table>
  429.                         <tr>
  430.                             <td style="width:1%;">Username:&nbsp;</td>
  431.                             <td>
  432.                                 <input type="text" id="usrnm" style="width:95%;">
  433.                             </td>
  434.                         </tr>
  435.                         <tr>
  436.                             <td>Password:&nbsp;</td>
  437.                             <td>
  438.                                 <input type="password" id="pwd" style="width:95%;">
  439.                             </td>
  440.                         </tr>
  441.                     </table>
  442.                     <input type="submit" id="login" value="Login" class="btn btn-primary fullwidth" onClick="Login()">
  443.                 </form>
  444.         </fieldset>
  445.     </div>
  446. </div>
  447. </body>
  448. </html>
  449.  
Jan 3 '15 #4

Exequiel
100+
P: 287
You can try this code.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <title>Zick Login Sample</title>
  4. <head>
  5. <style>
  6. html, body{padding:0px; margin:0px;}
  7. #loginBG{
  8.     background:rgba(1,1,1,0.3);
  9.     height:100%;
  10.     width:100%;
  11.     position:fixed;
  12.     float:none;
  13.     z-index:1;
  14.     top:0;
  15.     font-family:Arial, Helvetica, sans-serif;
  16. }
  17. .loginwrapper{
  18.     background:#FFF;
  19.     padding:10px;
  20.     margin: 0px auto;
  21.     width: 400px;
  22.     margin-top:20px;
  23.     border-radius:5px;
  24.     box-shadow:0px 2px 2px rgba(1,1,1,0.4);
  25. }
  26. .fieldset{
  27.     padding:20px;    
  28.     border-radius:5px;
  29.     border:1px solid #333;
  30. }
  31. .fieldset legend{font-weight:bold; padding: 5px;}
  32. .fieldset table{paddng:0px; margin:0px; margin-bottom:10px; width:100%;}
  33. .fieldset table tr td{
  34.     font-weight:bold;
  35.     padding:0px;
  36. }
  37. .close {
  38.   float: right;
  39.   font-size: 20px;
  40.   font-weight: bold;
  41.   line-height: 20px;
  42.   color: #000000;
  43.   text-shadow: 0 1px 0 #ffffff;
  44.   opacity: 0.2;
  45.   filter: alpha(opacity=20);
  46. }
  47. .close:hover,
  48. .close:focus {
  49.   color: #000000;
  50.   text-decoration: none;
  51.   cursor: pointer;
  52.   opacity: 0.4;
  53.   filter: alpha(opacity=40);
  54. }
  55. button.close {
  56.   padding: 0;
  57.   cursor: pointer;
  58.   background: transparent;
  59.   border: 0;
  60.   -webkit-appearance: none;
  61. }
  62. .btn {
  63.   display: inline-block;
  64.   *display: inline;
  65.   padding: 4px 12px;
  66.   margin-bottom: 0;
  67.   *margin-left: .3em;
  68.   font-size: 14px;
  69.   line-height: 20px;
  70.   color: #333333;
  71.   text-align: center;
  72.   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  73.   vertical-align: middle;
  74.   cursor: pointer;
  75.   background-color: #f5f5f5;
  76.   *background-color: #e6e6e6;
  77.   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  78.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  79.   background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  80.   background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  81.   background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  82.   background-repeat: repeat-x;
  83.   border: 1px solid #cccccc;
  84.   *border: 0;
  85.   border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  86.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  87.   border-bottom-color: #b3b3b3;
  88.   -webkit-border-radius: 4px;
  89.      -moz-border-radius: 4px;
  90.           border-radius: 4px;
  91.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  92.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  93.   *zoom: 1;
  94.   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  95.      -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  96.           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  97. }
  98. .btn:hover,
  99. .btn:focus,
  100. .btn:active,
  101. .btn.active,
  102. .btn.disabled,
  103. .btn[disabled] {
  104.   color: #333333;
  105.   background-color: #e6e6e6;
  106.   *background-color: #d9d9d9;
  107. }
  108. .btn:active,
  109. .btn.active {
  110.   background-color: #cccccc \9;
  111. }
  112. .btn:first-child {
  113.   *margin-left: 0;
  114. }
  115. .btn:hover,
  116. .btn:focus {
  117.   color: #333333;
  118.   text-decoration: none;
  119.   background-position: 0 -15px;
  120.   -webkit-transition: background-position 0.1s linear;
  121.      -moz-transition: background-position 0.1s linear;
  122.        -o-transition: background-position 0.1s linear;
  123.           transition: background-position 0.1s linear;
  124. }
  125. .btn:focus {
  126.   outline: thin dotted #333;
  127.   outline: 5px auto -webkit-focus-ring-color;
  128.   outline-offset: -2px;
  129. }
  130. .btn.active,
  131. .btn:active {
  132.   background-image: none;
  133.   outline: 0;
  134.   -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  135.      -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  136.           box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  137. }
  138. .btn-primary.active,
  139. .btn-warning.active,
  140. .btn-danger.active,
  141. .btn-success.active,
  142. .btn-info.active,
  143. .btn-inverse.active {
  144.   color: rgba(255, 255, 255, 0.75);
  145. }
  146. .btn-primary {
  147.   color: #ffffff;
  148.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  149.   background-color: #006dcc;
  150.   *background-color: #0044cc;
  151.   background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  152.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  153.   background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  154.   background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  155.   background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  156.   background-repeat: repeat-x;
  157.   border-color: #0044cc #0044cc #002a80;
  158.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  159.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  160.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  161. }
  162. .btn-primary:hover,
  163. .btn-primary:focus,
  164. .btn-primary:active,
  165. .btn-primary.active,
  166. .btn-primary.disabled,
  167. .btn-primary[disabled] {
  168.   color: #ffffff;
  169.   background-color: #0044cc;
  170.   *background-color: #003bb3;
  171. }
  172. .btn-primary:active,
  173. .btn-primary.active {
  174.   background-color: #003399 \9;
  175. }
  176. .btn-warning {
  177.   color: #ffffff;
  178.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  179.   background-color: #faa732;
  180.   *background-color: #f89406;
  181.   background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  182.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  183.   background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  184.   background-image: -o-linear-gradient(top, #fbb450, #f89406);
  185.   background-image: linear-gradient(to bottom, #fbb450, #f89406);
  186.   background-repeat: repeat-x;
  187.   border-color: #f89406 #f89406 #ad6704;
  188.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  189.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
  190.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  191. }
  192. .btn-warning:hover,
  193. .btn-warning:focus,
  194. .btn-warning:active,
  195. .btn-warning.active,
  196. .btn-warning.disabled,
  197. .btn-warning[disabled] {
  198.   color: #ffffff;
  199.   background-color: #f89406;
  200.   *background-color: #df8505;
  201. }
  202. .btn-warning:active,
  203. .btn-warning.active {
  204.   background-color: #c67605 \9;
  205. }
  206. .btn-danger {
  207.   color: #ffffff;
  208.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  209.   background-color: #da4f49;
  210.   *background-color: #bd362f;
  211.   background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
  212.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
  213.   background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
  214.   background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
  215.   background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
  216.   background-repeat: repeat-x;
  217.   border-color: #bd362f #bd362f #802420;
  218.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  219.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
  220.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  221. }
  222. .btn-danger:hover,
  223. .btn-danger:focus,
  224. .btn-danger:active,
  225. .btn-danger.active,
  226. .btn-danger.disabled,
  227. .btn-danger[disabled] {
  228.   color: #ffffff;
  229.   background-color: #bd362f;
  230.   *background-color: #a9302a;
  231. }
  232. .btn-danger:active,
  233. .btn-danger.active {
  234.   background-color: #942a25 \9;
  235. }
  236. .btn-success {
  237.   color: #ffffff;
  238.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  239.   background-color: #5bb75b;
  240.   *background-color: #51a351;
  241.   background-image: -moz-linear-gradient(top, #62c462, #51a351);
  242.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  243.   background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  244.   background-image: -o-linear-gradient(top, #62c462, #51a351);
  245.   background-image: linear-gradient(to bottom, #62c462, #51a351);
  246.   background-repeat: repeat-x;
  247.   border-color: #51a351 #51a351 #387038;
  248.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  249.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
  250.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  251. }
  252. .btn-success:hover,
  253. .btn-success:focus,
  254. .btn-success:active,
  255. .btn-success.active,
  256. .btn-success.disabled,
  257. .btn-success[disabled] {
  258.   color: #ffffff;
  259.   background-color: #51a351;
  260.   *background-color: #499249;
  261. }
  262. .btn-success:active,
  263. .btn-success.active {
  264.   background-color: #408140 \9;
  265. }
  266. .btn-info {
  267.   color: #ffffff;
  268.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  269.   background-color: #49afcd;
  270.   *background-color: #2f96b4;
  271.   background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  272.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  273.   background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  274.   background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  275.   background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
  276.   background-repeat: repeat-x;
  277.   border-color: #2f96b4 #2f96b4 #1f6377;
  278.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  279.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
  280.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  281. }
  282. .btn-info:hover,
  283. .btn-info:focus,
  284. .btn-info:active,
  285. .btn-info.active,
  286. .btn-info.disabled,
  287. .btn-info[disabled] {
  288.   color: #ffffff;
  289.   background-color: #2f96b4;
  290.   *background-color: #2a85a0;
  291. }
  292. .btn-info:active,
  293. .btn-info.active {
  294.   background-color: #24748c \9;
  295. }
  296. .btn-inverse {
  297.   color: #ffffff;
  298.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  299.   background-color: #363636;
  300.   *background-color: #222222;
  301.   background-image: -moz-linear-gradient(top, #444444, #222222);
  302.   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
  303.   background-image: -webkit-linear-gradient(top, #444444, #222222);
  304.   background-image: -o-linear-gradient(top, #444444, #222222);
  305.   background-image: linear-gradient(to bottom, #444444, #222222);
  306.   background-repeat: repeat-x;
  307.   border-color: #222222 #222222 #000000;
  308.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  309.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
  310.   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  311. }
  312. .btn-inverse:hover,
  313. .btn-inverse:focus,
  314. .btn-inverse:active,
  315. .btn-inverse.active,
  316. .btn-inverse.disabled,
  317. .btn-inverse[disabled] {
  318.   color: #ffffff;
  319.   background-color: #222222;
  320.   *background-color: #151515;
  321. }
  322. .btn-inverse:active,
  323. .btn-inverse.active {
  324.   background-color: #080808 \9;
  325. }
  326. button.btn,
  327. input[type="submit"].btn {
  328.   *padding-top: 3px;
  329.   *padding-bottom: 3px;
  330. }
  331. button.btn::-moz-focus-inner,
  332. input[type="submit"].btn::-moz-focus-inner {
  333.   padding: 0;
  334.   border: 0;
  335. }
  336. button.btn.btn-large,
  337. input[type="submit"].btn.btn-large {
  338.   *padding-top: 7px;
  339.   *padding-bottom: 7px;
  340. }
  341. button.btn.btn-small,
  342. input[type="submit"].btn.btn-small {
  343.   *padding-top: 3px;
  344.   *padding-bottom: 3px;
  345. }
  346. button.btn.btn-mini,
  347. input[type="submit"].btn.btn-mini {
  348.   *padding-top: 1px;
  349.   *padding-bottom: 1px;
  350. }
  351. input[type="text"],
  352. input[type="password"]{
  353.     display: inline-block;
  354.   height: 20px;
  355.   padding: 4px 6px;
  356.   margin-bottom: 10px;
  357.   font-size: 14px;
  358.   line-height: 20px;
  359.   color: #555555;
  360.   vertical-align: middle;
  361.   -webkit-border-radius: 4px;
  362.      -moz-border-radius: 4px;
  363.           border-radius: 4px;
  364. }
  365. input[type="text"],
  366. input[type="password"]{
  367.      background-color: #ffffff;
  368.   border: 1px solid #cccccc;
  369.   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  370.      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  371.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  372.   -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  373.      -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  374.        -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  375.           transition: border linear 0.2s, box-shadow linear 0.2s;
  376. }
  377. input[type="text"]:focus,
  378. input[type="password"]:focus{
  379.     border-color: rgba(82, 168, 236, 0.8);
  380.     outline: 0;
  381.     outline: thin dotted \9;
  382.     /* IE6-9 */
  383.     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  384.      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  385.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  386. }
  387. .fullwidth{
  388.     width:100%;
  389. }
  390. </style>
  391. <script>
  392. function Login() 
  393. {
  394.     var usrnm = document.getElementById("usrnm").value;
  395.     var pwd = document.getElementById("pwd").value;
  396.  
  397.     if(usrnm != "" && pwd != "")
  398.     {
  399.         document.getElementById("demo").innerHTML = "Hello " + usrnm + "! How are you today? <br> Your password is "+pwd;
  400.         closemodal();//close the login modal
  401.     }
  402. }
  403. function showmodal(){
  404.     document.getElementById("loginBG").style.display="block";
  405. }
  406. function closemodal(){
  407.     document.getElementById("loginBG").style.display="none";
  408. }
  409. </script>
  410. </head>
  411. <body>
  412.  
  413. <p>Click the button to demonstrate the prompt box.</p>
  414. <button onclick="showmodal()">Try it</button>
  415. <div id="demo"></div>
  416.  
  417. <div id="loginBG" style="display:none;">
  418.     <div id="loginwrapper" class="loginwrapper">
  419.         <div align="right" style="float:right;margin-right:7px; margin-bottom:6px; margin-top:-2px;">
  420.             <button type="button" class="close" onclick="closemodal()" style="position:absolute;" title="Close">
  421.                 <span aria-hidden="true">&times;</span>
  422.             </button>
  423.         </div>
  424.          <div style="clear:both; padding:0px;"></div>
  425.         <fieldset class="fieldset">
  426.             <legend>LOGIN</legend>
  427.                 <form method="post" action="javascript:;">
  428.                     <table>
  429.                         <tr>
  430.                             <td style="width:1%;">Username:&nbsp;</td>
  431.                             <td>
  432.                                 <input type="text" id="usrnm" style="width:95%;">
  433.                             </td>
  434.                         </tr>
  435.                         <tr>
  436.                             <td>Password:&nbsp;</td>
  437.                             <td>
  438.                                 <input type="password" id="pwd" style="width:95%;">
  439.                             </td>
  440.                         </tr>
  441.                     </table>
  442.                     <input type="submit" id="login" value="Login" class="btn btn-primary fullwidth" onClick="Login()">
  443.                 </form>
  444.         </fieldset>
  445.     </div>
  446. </div>
  447. </body>
  448. </html>
  449.  
Jan 3 '15 #5

Post your reply

Sign in to post your reply or Sign up for a free account.