Jquery modal var

Asked

Viewed 93 times

0

            @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
            html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            }
            .page-wrapper {
            width: 100%;
            height: 100%;
            background: url() center no-repeat;
            background-size: cover;
            }
            .blur-it {
            filter: blur(4px);
            }
            a.btn {
    		display: inline-block;
			margin: 0.75em;
			padding: 1.35em 1.1em;
			width: 15em;
			background: #2880C8;
			color: white;
			outline: none;
			text-decoration: none;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-weight: 800;
			border-radius: 20px/50px;
            }
			a.btn:hover{
			color: #00D3FF;
			}
            .modal-wrapper {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: #D7D7D7;
            visibility: hidden;
            opacity: 0;
            transition: all 0.25s ease-in-out;
            }
            .modal-wrapper.open {
            opacity: 1;
            visibility: visible;
            }
            .modal {
            width: 600px;
            height: 400px;
            display: block;
            margin: 50% 0 0 -300px;
            position: relative;
            top: 50%;
            left: 50%;
            background: #eeeeee;
            opacity: 0;
            transition: all 0.5s ease-in-out;
            }
            .modal-wrapper.open .modal {
            margin-top: -200px;
            opacity: 1;
            }
            .head {
            width: 100%;
            height: 32px;
            padding: 12px 30px;
            overflow: hidden;
            background: #1A7C9F;
            }
            .btn-close {
			position: absolute;
			box-sizing: border-box;
			padding: 5px;
			top:0;
			right:0;
			color:#FFFFFF;
			text-decoration: none;
            }
			.btn-close:hover{
			text-decoration: none;
			color: aqua;
			}
            .content {
            padding: 10%;
            }
            .good-job {
            text-align: center;
            font-family: 'Montserrat', Arial,       Helvetica, sans-serif;
            color: #0C91B9;
			margin-top: -50px;
            }
            .good-job .fa-thumbs-o-up {
            font-size: 60px;
            }
            .good-job h1 {
            font-size: 45px;
            }
			.good-job p{
			margin-top: 50px;

			}
 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Documento sem título</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/css.css" />
    </head>
    <body>
        <!-- Button -->
        <div class="page-wrapper">
            <a class="btn trigger" href="#">Melhor de 10 </a>
        </div>
        <!-- Modal -->
        <div class="modal-wrapper">
            <div class="modal">
                <div class="head">
                    <a class="btn-close trigger" href="#">X</a>
                </div>
                <div class="content">
                    <div class="good-job">
                        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                        <h1>Melhor de 10 (md10)!</h1>
						<p>Com o início da nova season, não passe sufoco caindo de liga. Contrate nosso serviço de MD10 e garanta logo sua liga atual! Com a ELOMAX, as chances de cair em um elo maior que seu anterior também são grandes! Clique aqui e adquria já!</p>
                    </div>
                </div>
            </div>
        </div>
		
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            $( document ).ready(function() {
             $('.trigger').on('click', function() {
                $('.modal-wrapper').toggleClass('open');
               $('.page-wrapper').toggleClass('blur-it');
                return false;
             });
            });
        </script>
    </body>
</html>

Well I was wanting to add several modals, but how could I do that without having to create a script for each modal?

 <script>
        $( document ).ready(function() {
         $('.trigger').on('click', function() {
            $('.modal-wrapper').toggleClass('open');
           $('.page-wrapper').toggleClass('blur-it');
            return false;
         });
        });
    </script>
jquery css

1 answer

1


To work with multiple "modals", you need to work with the "ID’s". And in this case work with toggleClass maybe not the best option.

$(document).ready(function() {
  $('.page-wrapper').on('click', '.trigger', function() {
  
    /* Captura o ID através do atributo `href` */
    let id = $(this).attr("href");
    
    /* Exibe o modal conforme o ID */
    $(id + ".modal-wrapper").addClass('open');
    $(".page-wrapper").addClass('blur-it');
    return false;
  });

  $('.modal-wrapper .head').on('click', '.trigger', function() {
  
    /* Acessa a div .modal-wrapper pai do botão e remove o modal */
    $(this).parents('.modal-wrapper').removeClass('open');
    $(".page-wrapper").removeClass('blur-it');
    return false;
  });
});
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css);
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.page-wrapper {
  width: 100%;
  height: 100%;
  background: url() center no-repeat;
  background-size: cover;
}

.blur-it {
  filter: blur(4px);
}

a.btn {
  display: inline-block;
  margin: 0.75em;
  padding: 1.35em 1.1em;
  width: 15em;
  background: #2880C8;
  color: white;
  outline: none;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  border-radius: 20px/50px;
}

a.btn:hover {
  color: #00D3FF;
}

.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #D7D7D7;
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}

.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 600px;
  height: 400px;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%;
  left: 50%;
  background: #eeeeee;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
}

.head {
  width: 100%;
  height: 32px;
  padding: 12px 30px;
  overflow: hidden;
  background: #1A7C9F;
}

.btn-close {
  position: absolute;
  box-sizing: border-box;
  padding: 5px;
  top: 0;
  right: 0;
  color: #FFFFFF;
  text-decoration: none;
}

.btn-close:hover {
  text-decoration: none;
  color: aqua;
}

.content {
  padding: 10%;
}

.good-job {
  text-align: center;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  color: #0C91B9;
  margin-top: -50px;
}

.good-job .fa-thumbs-o-up {
  font-size: 60px;
}

.good-job h1 {
  font-size: 45px;
}

.good-job p {
  margin-top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Button -->
<div class="page-wrapper">
  <a class="btn trigger" href="#melhorDeDez">Melhor de 10 </a>
  
  <!-- Se você quiser mudar o nome, deve mudar o atributo `href`, porém DEVE deixar o "#" (linha de baixo) -->
  <a class="btn trigger" href="#melhorDeNove">Melhor de 9 </a>
</div>


<!-- Modal #melhordeDez -->
<div class="modal-wrapper" id="melhorDeDez">
  <div class="modal">
    <div class="head">
      <a class="btn-close trigger" href="">X</a>
    </div>
    <div class="content">
      <div class="good-job">
        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
        <h1>Melhor de 10 (md10)!</h1>
        <p>Com o início da nova season, não passe sufoco caindo de liga. Contrate nosso serviço de MD10 e garanta logo sua liga atual! Com a ELOMAX, as chances de cair em um elo maior que seu anterior também são grandes! Clique aqui e adquria já!</p>
      </div>
    </div>
  </div>
</div>

<!-- Modal #melhordeNove -->
<!-- Se você quiser mudar o nome, deve mudar o atributo `id` (linha de baixo) -->
<div class="modal-wrapper" id="melhorDeNove">
  <div class="modal">
    <div class="head">
      <a class="btn-close trigger" href="">X</a>
    </div>
    <div class="content">
      <div class="good-job">
        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
        <h1>Melhor de 9 (md9)!</h1>
        <p>Com o início da nova season, não passe sufoco caindo de liga. Contrate nosso serviço de MD9 e garanta logo sua liga atual! Com a ELOMAX, as chances de cair em um elo maior que seu anterior também são grandes! Clique aqui e adquria já!</p>
      </div>
    </div>
  </div>
</div>

  • I tried to copy the nine div and change the id to eight and it didn’t show up, you know?

  • @Felipe, you must edit these two lines <a class="btn trigger" href="#melhorDeNove">Melhor de 9 </a> (Trigger that activates the modal) and <div class="modal-wrapper" id="melhorDeNove"> (Modal name)

  • <div class="modal-wrapper" id="bestDeOito"> <div class="modal"> <div class="head"> <a class="btn-close Trigger" href="">X</a> </div> <div class="content"> <div class="good-job"> <i class="fa fa-Thumbs-o-up" Aria-Hidden=""true"></i> <H1>Best of 9 (md9)! </H1> <p>With the start of the new Senason, do not suffocate by falling out of the alloy. Hire our MD9 service and guarantee your current league! With ELOMAX, the chances of falling into a bigger link than your previous one are also great! Click here and get it now! </p> </div> </div> </div>

  • i changed exactly that : <div class="modal-wrapper" id="best">

  • I copied the div q you created and changed the id, but it does not appear.

  • As I said earlier, you need to change two lines to work. Changing only the div ID will not work. It is necessary to change the tag attribute <a> also. I changed my answer, added where it should change.

  • sorry kk was the sleep you are the dude bro!!

  • https://answall.com/questions/266525/problema-em-deixar-uma-section-reponsive. mano has as a force there?

Show 3 more comments

Browser other questions tagged jquery css

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