Volver al Programación / Codificación foro

Emergente con Javascript.... DIV...De hojas de estilo ..

  • accounts
  • Born
  • Born
  • No Avatar
  • Registrado: Jun 07, 2010
  • Mensajes: 1
  • Status: Offline

Nota Junio 7th, 2010, 11:24 pm

queremos mostrar una ventana emergente con los valores de texto....

Código: [ 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. }
  81. function hideModal(divID)
  82. {
  83.   document.getElementById(divID).style.display = "none";
  84. }
  86. </script>
  87. </head>
  88. <body>
  90. <form name="f1">
  91. <table border=2 color="orange">
  92. <tr>
  93. <td>
  94. <table>
  95. <tr>
  96.     <td>First Name</td>
  97.     <td>:</td>
  98.     <td><input type="text" id="fname" name="t1"></td>
  99. </tr>
  100. <tr>
  101.     <td>Middle Name</td>
  102.     <td>:</td>
  103.     <td><input type="text" id="mname" name="t2"></td>
  104. </tr>
  106. </table>
  107. </td>
  108. </tr>
  109. </table>
  110. </form>
  112. <input id="Button1" type="button" value="Click here to be naughty" onclick="revealModal('modalPage')" />
  113. </body>
  114. </html>


se pone la salida como la ventana emergente...pero yo hacer notknow cómo hacer que una ventana emergente con los valores de texto.....

si no es geting con este código, usted puede darme un código de emergente con hoja de estilo, div y javascript que muestra los valores de texto...

dándole las gracias...
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Junio 7th, 2010, 11:24 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de Usuario
  • Registrado: Mar 12, 2007
  • Mensajes: 6228
  • Loc: South-Africa
  • Status: Offline

Nota Junio 8th, 2010, 11:32 pm

No se puede poner un div en el <head> </ seccion> cabeza, tiene que mover a la que div <body> </ sección body>.
Let's leave all our *plum* where it is and go live in the jungle ...

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 2 mensajes
  • Usuarios navegando por este Foro: Kurthead+1 y 199 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC