Jquery modal var

Question

Jquery modal var

Navigation

#1 by (1 votes)

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 looking to add several modals, but how could I do this 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

asked by anonymous 03.01.2018 / 00:30

1 answer

VBA Print by PDFCreator return tinyint as boolean in json encode

score 1 · Accepted Answer

To work with several "modals", you need to work with the "ID's". And in that case working with toggleClass may not be 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--><divclass="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>