resolvido [Jquery] data-toggle

[Luiiiz]

Queria criar "data-toggle" com jquery para modais. Um item que funcionasse para todos os modais que eu criar sem precisar criar code para  abrir/fechar para cada modal. Algo que seja mais fácil e só adicionais no html e usar. Obrigado desde já a todos que ajudarem

[leonardosc]

Tá usando quais frameworks? bootstrap?

[Luiiiz]

Tá usando quais frameworks? bootstrap?

Para modal, eu mesmo faco eles. Agora, de maneira geral, eu uso o jquery e o simplegrid

Editado Dezembro 17, 2017 por Luiiiz

[leonardosc]

Para modal, eu mesmo faco eles. Agora, de maneira geral, eu uso o jquery e o simplegrid

 

Como você cria o modal, qual é a estrutura? Tipo

 

<div class="modal">

conteudo do modal etc

</div>

[Dery]

$("[data-toggle]").click(function (){

	var toggle = $($(this).data("toggle")).first();

	/*
 

	Faz o que é para ser feito com o modal
 

	Exemplo:

	toggle.animate({

		opacity: 1,

		top: "10%"

	});
 

	*/

});

[Luiiiz]

Como você cria o modal, qual é a estrutura? Tipo

 

<div class="modal">

conteudo do modal etc

</div>

 

HTML

 

 

<div class="modal">
 <div class="modal-container">
  <div class="modal-content">
   <div class="modal-header">
    <h1>Modal Header</h1>
   </div>
   <div class="modal-section">
    Modal texto
   </div>
   <div class="modal-footer">
    <button class="modal-btn">Fechar</button>
   </div>
  </div>
 </div>
</div>

 

CSS

 

 

 
.noScroll { overflow: hidden; }
.modal {
 width: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0, 0, 0, .9);
 position: fixed;
 overflow: auto;
 display: none;
}
 
.modal-container {
 width: 50%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: 5% auto;
 border-radius: 3px;
 background-color: #fff;
 animation: modal-anim 1s;
}
 
@keyframes modal-anim {
 from { margin: -5% auto; opacity: 0; }
 to { margin: 5% auto; opacity: 1; }
}
 
.modal-header { padding: 10px 20px; border-bottom: 1px solid #ddd; }
.modal-header h1 {
 color: #222;
 font-size: 15pt;
 font-weight: 400;
}
 
.modal-section {
 padding: 10px 15px;
 color: #aaa;
 text-align: justify;;
 word-break: break-all;
}
 
.modal-footer {
 padding: 10px 20px;
 border-top: 1px solid #ddd;
 text-align: center;
}
 
.modal-btn {
 font-size: 12pt;
 font-weight: 600;
 padding: 7px 20px;
 background-color: #0287D0;
 color: #fff;
 border: 1px solid #0077C0;
 border-radius: 3px;
 cursor: pointer;
 outline: none;
}
 
.modal-btn:hover {
 background-color: #0077C0;
}

 

Jquery

 

 

<script>
$(document).ready(function() {
 
 $('.openModal').click(function() {
  $('.modal').show();
  $('body').addClass('noScroll');
 });
 
 $('.modal-btn').click(function() {
  $('.modal').hide();
  $('body').removeClass('noScroll');
 });
 
});

 

$("[data-toggle]").click(function (){
	var toggle = $($(this).data("toggle")).first();
	/*
	
	Faz o que é para ser feito com o modal
	
	Exemplo:
	toggle.animate({
		opacity: 1,
		top: "10%"
	});
	
	*/
});

 

Vou testar isso. Só pode me explicar essa linha?

var toggle = $($(this).data("toggle")).first();

[Dery]

HTML

<div class="modal">
 <div class="modal-container">
  <div class="modal-content">
   <div class="modal-header">
    <h1>Modal Header</h1>
   </div>
   <div class="modal-section">
    Modal texto
   </div>
   <div class="modal-footer">
    <button class="modal-btn">Fechar</button>
   </div>
  </div>
 </div>
</div>

CSS

 
.noScroll { overflow: hidden; }
.modal {
 width: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0, 0, 0, .9);
 position: fixed;
 overflow: auto;
 display: none;
}
 
.modal-container {
 width: 50%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: 5% auto;
 border-radius: 3px;
 background-color: #fff;
 animation: modal-anim 1s;
}
 
@keyframes modal-anim {
 from { margin: -5% auto; opacity: 0; }
 to { margin: 5% auto; opacity: 1; }
}
 
.modal-header { padding: 10px 20px; border-bottom: 1px solid #ddd; }
.modal-header h1 {
 color: #222;
 font-size: 15pt;
 font-weight: 400;
}
 
.modal-section {
 padding: 10px 15px;
 color: #aaa;
 text-align: justify;;
 word-break: break-all;
}
 
.modal-footer {
 padding: 10px 20px;
 border-top: 1px solid #ddd;
 text-align: center;
}
 
.modal-btn {
 font-size: 12pt;
 font-weight: 600;
 padding: 7px 20px;
 background-color: #0287D0;
 color: #fff;
 border: 1px solid #0077C0;
 border-radius: 3px;
 cursor: pointer;
 outline: none;
}
 
.modal-btn:hover {
 background-color: #0077C0;
}

Jquery

<script>
$(document).ready(function() {
 
 $('.openModal').click(function() {
  $('.modal').show();
  $('body').addClass('noScroll');
 });
 
 $('.modal-btn').click(function() {
  $('.modal').hide();
  $('body').removeClass('noScroll');
 });
 
});

Vou testar isso. Só pode me explicar essa linha?

var toggle = $($(this).data("toggle")).first();

Pega o primeiro elemento informado.

 

Tipo:

<a href="#" data-toggle="#modal">Abrir modal 1</a> // Pega o primeiro elemento com id "modal"
<a href="#" data-toggle=".modal">Abrir modal 1</a> // Pega o primeiro elemento que tem a class "modal"
<a href="#" data-toggle="[modal]">Abrir modal 1</a> // Pega o primeiro elemento que tem o atributo "modal"

[Luiiiz]

 

Pega o primeiro elemento informado.

 

Tipo:

<a href="#" data-toggle="#modal">Abrir modal 1</a> // Pega o primeiro elemento com id "modal"
<a href="#" data-toggle=".modal">Abrir modal 1</a> // Pega o primeiro elemento que tem a class "modal"
<a href="#" data-toggle="[modal]">Abrir modal 1</a> // Pega o primeiro elemento que tem o atributo "modal"

Opaa, saquei. Vou testar aq. Se funfar, dou como melhor resposta.

Isso funciona também para data-target?

Editado Dezembro 17, 2017 por Luiiiz

[Luiiiz]

$("[data-toggle]").click(function (){
	var toggle = $($(this).data("toggle")).first();
	/*
	
	Faz o que é para ser feito com o modal
	
	Exemplo:
	toggle.animate({
		opacity: 1,
		top: "10%"
	});
	
	*/
});

 

Bom, eu testei e não funcionou. Acho que foi um erro meu. Poderia dar um exemplo de como funcionaria para abrir um modal? Tipo, ele pegar o id do modal, e mudar o css deste modal para block(Obs: O css onde se encontra no estilo do modal com display none, é uma classe. Sendo o id somente para identificar qual modal deve ser aberto)?

[lucakiksd07]

Sua dúvida foi marcada como [Resolvido] e movido à área de dúvidas resolvidas.


Atenciosamente,
Gamer's Board