Opening 2 modals with same class - CSS

Asked

Viewed 41 times

1

Guys, mt good night. All right?

My question is relatively simple. I have a modal box for presenting a simple text. I would also like to use it to show, as soon as the user clicks on another link, a text field, in which he can recover the forgotten password of the registration. Such password will be sent by e-mail.

The configuration of PHP I can do smoothly, only I am in doubt even in using correctly CSS.

Follows code:

<style>
/* CSS para modal box para visualização das regras */
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#999);
	background: -webkit-linear-gradient(#999);
	background: -o-linear-gradient(#999);
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}


/* CSS para envio da senha ("esqueceu sua senha?") */


</style>
<html>
 <head>
   </head>
<body>
  <table><tr><th>
     <a href="#openModal">regras</a>
          
      <div id="openModal" class="modalDialog">
        <div>
         <a href="#close" title="Fechar" class="close">X</a>
              <h2>Regras de Reserva</h2>
			  <p>Texto Simples</p> 
              </div>
          </div> </th></tr></table>
  
  Minha ideira era colocar mais um painel desse, porém com um <input type="text"> e um botão <input type="submit">. 
                                                        
  
</body>
</html>

<style>
/* CSS para modal box para visualização das regras */
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#999);
	background: -webkit-linear-gradient(#999);
	background: -o-linear-gradient(#999);
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}


/* CSS para envio da senha ("esqueceu sua senha?") */


</style>

I just don’t know why the code didn’t run correctly on the dashboard there.

Grande abs!

php html css webforms modal

1 answer

1

Good morning friend! From what I understand you need to do another modal with the input and the send button, right? Well if it is, just use the same method, placing the input and button inside the modal.Follow the code:

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity:1;
  pointer-events: auto;
}
#openModal.show{
  opacity:1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#999);
  background: -webkit-linear-gradient(#999);
  background: -o-linear-gradient(#999);
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
<table>
    <tbody>
        <tr>
            <th>
                <a href="#openModal">regras</a>

                <div id="openModal" class="modalDialog">
                    <div>
                        <a href="#close" title="Fechar" id="closex" class="close">X</a>
                        <h2>Regras de Reserva</h2>
                        <p>Texto Simples</p>
                    </div>
                </div>
            </th>
        </tr>
    </tbody>
</table>


<table>
    <tbody>
        <tr>
            <th>
                <a href="#openModal2">modal2</a>

                <div id="openModal2" class="modalDialog">
                    <div>
                        <a href="#close" title="Fechar" id="closex" class="close">X</a>
                        <h2>Regras de Reserva</h2>
                        <p>Texto Simples</p>
                        <input type="text"> e um botão
                        <input type="submit">
                    </div>
                </div>
            </th>
        </tr>
    </tbody>
</table>

I’m waiting to hear if you solved, abs!

Browser other questions tagged php html css webforms modal

You are not signed in. Login or sign up in order to post.