473,407 Members | 2,315 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > js double input(username,password) pop up box.

Join Bytes to post your question to a community of 473,407 software developers and data experts.

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

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
4 1629
Dormilich
8,658 Expert Mod 8TB
kindly check out jQueryUI, this has such prompt boxes.
Nov 10 '14 #2
jmrker
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
288 256MB
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
288 256MB
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

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

Similar topics

20
Convert all characters to ' * ' where password is displayed...
by: David | last post by:
Hi, I have a field from my recordset called RS("Password"). If I wish to display each character as an asterix '*' how do I go about it. I've seen the replace function, but cannot work out how...
ASP / Active Server Pages
8
MS ACCess DB openning with password
by: ablyplus | last post by:
Hi, I am trying to open MS Access DB with c# like follows... OleDbConnection thisConnection = new OleDbConnection( @"Provider=Microsoft.Jet.OLEDB.4.0;" + @"Data Source=" + @"..\..\hren.mdb;"...
C# / C Sharp
3
I saved password into the database with "binary" data type from GetByte method. How can I to compare the password that between database and transfered from the page?
by: Benny Ng | last post by:
Dear all, The following is the source. The password is encrypted and saved into the Binary in SQL2K. Now I want to create a new page to compare the existed password and the password that in the...
.NET Framework
0
password reset function is not working
by: serkan | last post by:
Guys, I am trying to get this password reset functionality wor for me but I am not successful at all. Please somebody help me. I get "Your password could not be reset - please try again later" so I...
General
3
I am getting double of all my units in this code. any ideas?
by: rhdyes | last post by:
I work in a hospital and I am using php, postgres and apache to replace old paradox databases. I have made a form that contains a dropdown menu of the hospital units so I can choose the group of...
PHP
1
Problem showing apostrophe and double quotes, on web page
by: karen987 | last post by:
I have an ASP news page to which you can add comments. The comments open up in a new window, and users can click reply to reply to them after which they are taken to the parent page which has a...
ASP / Active Server Pages
2
Need help for forgot password page
by: chaos | last post by:
Hi all, i need help in this forgot password page, as the error message is show in another page cause the arrangement of the design in a mess. As i want to show the error message on the forgot...
PHP
10
George Lft
how to create Re-enter password / Username ?
by: George Lft | last post by:
In my new registration page, i'm trying to create a double entry password / username to validate their entry . haven't decided which one, probably i'll go just with the password . What is the PHP...
PHP
2
forget password coding issue
by: whitey | last post by:
Hi All, The following script works when username(or email) and password are in 1 table. what i need to know is how to adjust the code to reflect that the email will be held in tbl_email and the...
PHP
0
Connection error to microsoft access 2003 with password
by: calvinkwoo3000 | last post by:
My Window application run property withour link to mdb without password. Once i set security password to mdb file, the error belor come out when i click detail. Not a valid password. and detail...
Microsoft Access / VBA
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice
0
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!