Opening 2 modals with same class - CSS

Question

Opening 2 modals with same class - CSS

Navigation

#1 by (1 votes)

1

Well, good evening. Is that okay?

My question is relatively simple. I have a modal box to present a simple text. I would also like to use it to display, as soon as the user clicks on another link, a text field, in which you can retrieve the forgotten password from the registration. Such a password will be sent by email.

The configuration of PHP I can do with ease, I only doubt if I use CSS properly.

Follow the code below:

<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 do not know why the code did not run correctly there on the dashboard.

Great abs!

php html css webforms modal

asked by anonymous 28.07.2016 / 05:32

1 answer

When instantiating the ICollection PHP Object Lifetime - How Many Controller Instances?

score 1 · Answer 1

Good morning, my friend! From what I understand you need to do another modal with the input and the submit button, right? Well if this is just use the same method, putting the input and the button inside the modal.Segue 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 hope to know if it solved, abs!