POPUP with Javascript....DIV.....Stylesheet

  • accounts
  • Born
  • Born
  • accounts
  • Posts: 1

Post 3+ Months Ago

want to show a popup with textbox values....

Code: [ Select ]
<html>
<title>Reviel MOdal</title>
<head>
<div id="modalPage">
  <div class="modalBackground">
  </div>
  <div class="modalContainer">
    <div class="modal">
      <div class="modalTop"><a href="RevielModal_popup.html">[X]</a></div>
      <div class="modalBody">
        <p>i want to show the text box values here....</p>
      </div>
    </div>
  </div>
</div>
<style type="text/css">
body
{
  margin: 0px;
}
#modalPage
{
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px; left: 0px;
}
.modalBackground
{
  filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
  width: 100%; height: 100%; background-color: #999999;
  position: absolute;
  z-index: 500;
  top: 0px; left: 0px;
}
.modalContainer
{
  position: absolute;
  width: 300px;
  left: 50%;
  top: 50%;
  z-index: 750;
}
.modal
{
  background-color: white;
  border: solid 4px black; position: relative;
  top: -150px;
  left: -150px;
  z-index: 1000;
  width: 300px;
  height: 300px;
  padding: 0px;
}
.modalTop
{
  width: 292px;
  background-color: #000099;
  padding: 4px;
  color: #ffffff;
  text-align: right;
}
.modalTop a, .modalTop a:visited
{
  color: #ffffff;
}
.modalBody
{
  padding: 10px;
}
</style>
<script language="javascript" type="text/javascript">
function revealModal(divID)
{
  window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
  document.getElementById(divID).style.display = "block";
  document.getElementById(divID).style.top = document.body.scrollTop;
}

function hideModal(divID)
{
  document.getElementById(divID).style.display = "none";
}

</script>
</head>
<body>

<form name="f1">
<table border=2 color="orange">
<tr>
<td>
<table>
<tr>
    <td>First Name</td>
    <td>:</td>
    <td><input type="text" id="fname" name="t1"></td>
</tr>
<tr>
    <td>Middle Name</td>
    <td>:</td>
    <td><input type="text" id="mname" name="t2"></td>
</tr>

</table>
</td>
</tr>
</table>
</form>

<input id="Button1" type="button" value="Click here to be naughty" onclick="revealModal('modalPage')" />
</body>
</html>
  1. <html>
  2. <title>Reviel MOdal</title>
  3. <head>
  4. <div id="modalPage">
  5.   <div class="modalBackground">
  6.   </div>
  7.   <div class="modalContainer">
  8.     <div class="modal">
  9.       <div class="modalTop"><a href="RevielModal_popup.html">[X]</a></div>
  10.       <div class="modalBody">
  11.         <p>i want to show the text box values here....</p>
  12.       </div>
  13.     </div>
  14.   </div>
  15. </div>
  16. <style type="text/css">
  17. body
  18. {
  19.   margin: 0px;
  20. }
  21. #modalPage
  22. {
  23.   display: none;
  24.   position: absolute;
  25.   width: 100%;
  26.   height: 100%;
  27.   top: 0px; left: 0px;
  28. }
  29. .modalBackground
  30. {
  31.   filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
  32.   width: 100%; height: 100%; background-color: #999999;
  33.   position: absolute;
  34.   z-index: 500;
  35.   top: 0px; left: 0px;
  36. }
  37. .modalContainer
  38. {
  39.   position: absolute;
  40.   width: 300px;
  41.   left: 50%;
  42.   top: 50%;
  43.   z-index: 750;
  44. }
  45. .modal
  46. {
  47.   background-color: white;
  48.   border: solid 4px black; position: relative;
  49.   top: -150px;
  50.   left: -150px;
  51.   z-index: 1000;
  52.   width: 300px;
  53.   height: 300px;
  54.   padding: 0px;
  55. }
  56. .modalTop
  57. {
  58.   width: 292px;
  59.   background-color: #000099;
  60.   padding: 4px;
  61.   color: #ffffff;
  62.   text-align: right;
  63. }
  64. .modalTop a, .modalTop a:visited
  65. {
  66.   color: #ffffff;
  67. }
  68. .modalBody
  69. {
  70.   padding: 10px;
  71. }
  72. </style>
  73. <script language="javascript" type="text/javascript">
  74. function revealModal(divID)
  75. {
  76.   window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
  77.   document.getElementById(divID).style.display = "block";
  78.   document.getElementById(divID).style.top = document.body.scrollTop;
  79. }
  80. function hideModal(divID)
  81. {
  82.   document.getElementById(divID).style.display = "none";
  83. }
  84. </script>
  85. </head>
  86. <body>
  87. <form name="f1">
  88. <table border=2 color="orange">
  89. <tr>
  90. <td>
  91. <table>
  92. <tr>
  93.     <td>First Name</td>
  94.     <td>:</td>
  95.     <td><input type="text" id="fname" name="t1"></td>
  96. </tr>
  97. <tr>
  98.     <td>Middle Name</td>
  99.     <td>:</td>
  100.     <td><input type="text" id="mname" name="t2"></td>
  101. </tr>
  102. </table>
  103. </td>
  104. </tr>
  105. </table>
  106. </form>
  107. <input id="Button1" type="button" value="Click here to be naughty" onclick="revealModal('modalPage')" />
  108. </body>
  109. </html>


it gets the output as the popup... but i dontknow how to make a popup with textbox values.....

if it is not geting with this code , you can give me a code of popup with stylesheet, div and javascript showing textbox values...

thanking you...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

You can't put a div in the <head></head> section, you need to move that div to the <body></body> section.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 82 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.