0
Good afternoon, I need to put the contents of a popup inside a div, so that the content appears on a page, but if I take it all, it leaves does not appear as it is with the following id "quote-popup and quote-popup-content" that make it appear as popup and if I delete these Ids it gets all warped because of css and javascript.
Codes:
HTML:
<div id="quote-popup">
<div id="quote-popup-background">
</div>
<div id="quote-popup-content" class="animated speed">
<div id="quote-popup-close"><i class="fa fa-times"></i></div>
<ul id="quote-popup-tabs">
<li data-quote-tab-for="consorcio-auto">Automóvel</li>
<li data-quote-tab-for="consorcio-moto">Moto</li>
<li data-quote-tab-for="consorcio-casa">Imóvel</li>
</ul>
<div class="quote-forms">
<!--
travel insurance
-->
<div class="quote-form" data-quote-form-for="consorcio-auto">
<i class="fa fa-car background-icon"></i>
<div class="quote-form-background" style="background-image: url( '_assets/_img/simula_auto.png' ); display: block;">
</div>
<div class="quote-form-content">
<h2>Quero um <span>Automóvel</span></h2>
<div class="form">
<h4>Valor do consórcio: <span class="slider-value quote-form-element" data-name="Valor | Automóvel" data-slider-id="consorcio-auto">R$ <span></span></span></h4>
<div class="slider" data-slider-min="20000" data-slider-max="100000" data-slider-start="23192" data-slider-step="1000" data-slider-id="consorcio-auto"></div>
<h4>Seus dados:</h4>
<input type="text" name="Nome" placeholder="Nome..." class="quote-form-element" />
<input type="text" name="Cidade" placeholder="Cidade/UF..." class="quote-form-element quote-form-client-email last" />
<input type="text" name="Número de Telefone" placeholder="Telefone..." class="quote-form-element" />
<input type="text" name="Endereço de Email" placeholder="E-mail..." class="quote-form-element quote-form-client-email last" />
<h4>Política de Privacidade</h4>
<div class="checkbox quote-form-element" data-checked="yes" data-name="Política de Privacidade">
<span class="checkbox-status"><i class="fa fa-check"></i></span>
<span class="checkbox-values">
<span class="checkbox-value-checked" style="font-size: 14px">Li e aceito a política de privacidade</span>
<span class="checkbox-value-unchecked">Não aceito</span>
</span>
</div>
<button class="button button-navy-blue send-quote" type="button">Simular meu consórcio <i class="fa fa-paper-plane-o"></i></button>
<div class="quote-form-thanks">
<div class="quote-form-thanks-content">
Obrigado pelo seu interesse, retornaremos em breve ;).
<span class="quote-form-thanks-close">Fechar</span>
</div>
</div>
</div>
</div>
</div>
<!--
car insurance
-->
<div class="quote-form" data-quote-form-for="consorcio-moto">
<i class="fa fa-car background-icon"></i>
<div class="quote-form-background" style="background-image: url( '_assets/_img/simula_moto.png' );">
</div>
<div class="quote-form-content">
<h2>Quero uma <span>Moto</span></h2>
<div class="form">
<h4>Valor do consórcio: <span class="slider-value quote-form-element" data-name="Valor | Moto" data-slider-id="consorcio-moto">R$ <span></span></span></h4>
<div class="slider" data-slider-min="7000" data-slider-max="25000" data-slider-start="500" data-slider-step="7000" data-slider-id="consorcio-moto"></div>
<h4>Seus dados:</h4>
<input type="text" name="Nome" placeholder="Nome..." class="quote-form-element" />
<input type="text" name="Cidade" placeholder="Cidade/UF..." class="quote-form-element quote-form-client-email last" />
<input type="text" name="Número de Telefone" placeholder="Telefone..." class="quote-form-element" />
<input type="text" name="Endereço de Email" placeholder="E-mail..." class="quote-form-element quote-form-client-email last" />
<h4>Política de Privacidade</h4>
<div class="checkbox quote-form-element" data-checked="yes" data-name="Política de Privacidade">
<span class="checkbox-status"><i class="fa fa-check"></i></span>
<span class="checkbox-values">
<span class="checkbox-value-checked">Li e aceito a política de privacidade</span>
<span class="checkbox-value-unchecked">Não aceito</span>
</span>
</div>
<button class="button button-navy-blue send-quote" type="button">Simular meu consórcio <i class="fa fa-paper-plane-o"></i></button>
<div class="quote-form-thanks">
<div class="quote-form-thanks-content">
Obrigado pelo seu interesse, retornaremos em breve ;).
<span class="quote-form-thanks-close">Fechar</span>
</div>
</div>
</div>
</div>
</div>
<!--
Consórcio Auto
-->
<div class="quote-form" data-quote-form-for="consorcio-casa">
<i class="fa fa-car background-icon"></i>
<div class="quote-form-background" style="background-image: url( '_assets/_img/simula_casa.png' );">
</div>
<div class="quote-form-content">
<h2>Quero um <span>Imóvel</span></h2>
<div class="form">
<h4>Valor do consórcio: <span class="slider-value quote-form-element" data-name="Valor | Imóvel" data-slider-id="consorcio-casa">R$ <span></span></span></h4>
<div class="slider" data-slider-min="100000" data-slider-max="300000" data-slider-start="100000" data-slider-step="5000" data-slider-id="consorcio-casa"></div>
<h4>Seus dados:</h4>
<input type="text" name="Nome" placeholder="Nome..." class="quote-form-element" />
<input type="text" name="Cidade" placeholder="Cidade/UF..." class="quote-form-element quote-form-client-email last" />
<input type="text" name="Número de Telefone" placeholder="Telefone..." class="quote-form-element" />
<input type="text" name="Endereço de Email" placeholder="E-mail..." class="quote-form-element quote-form-client-email last" />
<h4>Política de Privacidade</h4>
<div class="checkbox quote-form-element" data-checked="yes" data-name="Política de Privacidade">
<span class="checkbox-status"><i class="fa fa-check"></i></span>
<span class="checkbox-values">
<span class="checkbox-value-checked">Li e aceito a política de privacidade</span>
<span class="checkbox-value-unchecked">Não aceito</span>
</span>
</div>
<button class="button button-navy-blue send-quote" type="button">Simular meu consórcio <i class="fa fa-paper-plane-o"></i></button>
<div class="quote-form-thanks">
<div class="quote-form-thanks-content">
Obrigado pelo seu interesse, retornaremos em breve ;).
<span class="quote-form-thanks-close">Fechar</span>
</div>
</div>
</div>
</div>
</div>
<!--
house insurance
-->
</div>
</div>
</div>
Javascript:
/**
*
* show quote form popup
*
*/
$.martanianShowQuotePopup = function( type ) {
var mode = windowWidth > 932 && windowHeight > 670 ? 'fixed' : 'absolute';
var selectedQuoteForm = $( '#quote-popup #quote-popup-content .quote-form[data-quote-form-for="'+ type +'"]' );
$( '#quote-popup #quote-popup-background' ).fadeIn( 300 );
$( '#quote-popup #quote-popup-content #quote-popup-tabs li[data-quote-tab-for="'+ type +'"]' ).addClass( 'active' );
if( mode == 'absolute' ) $( 'html, body' ).animate({ 'scrollTop': '0' }, 300 );
selectedQuoteForm.show();
setTimeout( function() {
if( mode == 'fixed' ) {
selectedQuoteForm.children( '.quote-form-background' ).css({ 'height': selectedQuoteForm.height() });
$( '#quote-popup #quote-popup-content' ).addClass( 'bounceInDown' ).css({ 'top': '50%', 'marginTop': - ( selectedQuoteForm.height() / 2 ), 'height': selectedQuoteForm.height(), 'position': 'fixed' });
}
else if( mode == 'absolute' ) {
if( windowWidth > 932 ) {
$( '#quote-popup #quote-popup-content' ).addClass( 'bounceInDown' ).css({ 'top': '50px', 'marginTop': '0px', 'height': selectedQuoteForm.height(), 'position': 'absolute' });
selectedQuoteForm.children( '.quote-form-background' ).css({ 'height': selectedQuoteForm.height() });
}
else {
if( windowWidth > 582 ) $( '#quote-popup #quote-popup-content' ).addClass( 'bounceInDown' ).css({ 'top': '50px', 'marginTop': '0px', 'height': selectedQuoteForm.height(), 'position': 'relative' });
else {
$( '#quote-popup #quote-popup-content' ).addClass( 'bounceInDown' ).css({ 'top': '50px', 'marginTop': '0px', 'height': selectedQuoteForm.height() + $( '#quote-popup-tabs' ).height() + 50, 'position': 'relative' });
}
}
}
}, 300 );
};
/**
*
* hide quote form popup
*
*/
$.martanianHideQuotePopup = function() {
$( '#quote-popup #quote-popup-content' ).removeClass( 'bounceInDown' ).addClass( 'bounceOutUp' );
setTimeout( function() {
$( '#quote-popup #quote-popup-background' ).fadeOut( 300 );
$( '#quote-popup #quote-popup-content' ).css({ 'top': '-10000px' }).removeClass( 'bounceOutUp' );
$( '#quote-popup #quote-popup-content .quote-form' ).hide();
$( '#quote-popup #quote-popup-content #quote-popup-tabs li' ).removeClass( 'active' );
}, 300 );
};
/**
*
* change quote form in popup
*
*/
$( '#quote-popup-tabs li' ).click( function() {
if( !$( this ).hasClass( 'active' ) ) {
var type = $( this ).data( 'quote-tab-for' );
var mode = windowWidth > 932 && windowHeight > 670 ? 'fixed' : 'absolute';
var newQuoteForm = $( '#quote-popup #quote-popup-content .quote-form[data-quote-form-for="'+ type +'"]' );
$( '#quote-popup #quote-popup-content #quote-popup-tabs li' ).removeClass( 'active' );
$( this ).addClass( 'active' );
$( '#quote-popup #quote-popup-content .quote-form' ).fadeOut( 300 );
if( mode == 'fixed' || windowWidth > 932 ) newQuoteForm.children( '.quote-form-background' ).animate({ 'height': newQuoteForm.height() }, 300 );
setTimeout( function() {
$( '#quote-popup #quote-popup-content .quote-form' ).hide();
newQuoteForm.fadeIn( 300 );
if( mode == 'fixed' ) $( '#quote-popup #quote-popup-content' ).animate({ 'height': newQuoteForm.height(), 'marginTop': - ( newQuoteForm.height() / 2 ) }, 300 );
else {
if( windowWidth > 582 ) $( '#quote-popup #quote-popup-content' ).animate({ 'height': newQuoteForm.height() }, 300 );
else {
$( '#quote-popup #quote-popup-content' ).animate({ 'height': newQuoteForm.height() + $( '#quote-popup-tabs' ).height() + 50 }, 300 );
}
}
}, 400 );
}
});
/**
*
* hooks to show contact form popup
*
*/
$( '*[data-action="show-quote-popup"]' ).click( function() {
var quoteKey = $( this ).data( 'quote-key' );
if( typeof quoteKey != 'undefined' && quoteKey !== false ) $.martanianShowQuotePopup( quoteKey );
});
/**
*
* hooks to hide quote popup
*
*/
$( '#quote-popup-close' ).click( function() {
$.martanianHideQuotePopup();
});
CSS:
#quote-popup #quote-popup-background {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba( 15, 19, 36, 0.73);
z-index: 99998;
display: none;
}
#quote-popup #quote-popup-content {
background: #fdfdfd;
position: fixed;
top: -10000px;
left: 50%;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 0 7px rgba( 15, 19, 36, 0.73);
z-index: 99999;
}
#quote-popup #quote-popup-content #quote-popup-close {
position: absolute;
right: -53px;
top: 20px;
background: #DDC666;
color: #fff;
font-weight: 700;
padding: 10px 20px;
font-size: 16px;
-webkit-border-top-right-radius: 2px;
-moz-border-top-right-radius: 2px;
border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-moz-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
cursor: pointer;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#quote-popup #quote-popup-content #quote-popup-close:hover {
background: #C2A14F;
}
#quote-popup #quote-popup-content #quote-popup-tabs {
list-style: none;
position: absolute;
top: 25px;
z-index: 99999;
}
#quote-popup #quote-popup-content #quote-popup-tabs li {
display: inline-block;
color: #C2A14F;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
position: relative;
cursor: pointer;
padding: 15px 0;
}
#quote-popup #quote-popup-content #quote-popup-tabs li.active {
color: #2C3459;
}
#quote-popup #quote-popup-content #quote-popup-tabs li:after {
content: ' ';
width: 100%;
height: 3px;
background: #f0f1f0;
position: absolute;
left: 0;
bottom: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#quote-popup #quote-popup-content #quote-popup-tabs li.active:after {
background: #2c3459;
}
#quote-popup #quote-popup-content #quote-popup-tabs li:not(.active):hover:after {
background: #C2A14F;
}
#quote-popup #quote-popup-content .quote-form {
overflow: hidden;
position: relative;
display: none;
}
#quote-popup #quote-popup-content .quote-form .quote-form-background {
background-size: cover;
background-repeat: no-repeat;
background-position: 60% 50%;
-webkit-border-top-left-radius: 2px;
-moz-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
}
#quote-popup #quote-popup-content .quote-form .background-icon {
position: absolute;
font-size: 300px;
z-index: -1;
opacity: 0.05;
-webkit-transform: rotate( 15deg);
-moz-transform: rotate( 15deg);
transform: rotate( 15deg);
bottom: -50px;
right: -50px;
}
#quote-popup #quote-popup-content .quote-form .quote-form-content h2 {
color: #2C3459;
font-size: 32px;
margin-bottom: 30px;
}
#quote-popup #quote-popup-content .quote-form .quote-form-content h2 span {
color: #C2A14F;
}
#quote-popup #quote-popup-content .quote-form .quote-form-content h4 {
color: #2C3459;
font-size: 16px;
margin: 20px 0 10px 0;
}
#quote-popup #quote-popup-content .quote-form .quote-form-content h4 .slider-value {
float: right;
color: #C2A14F;
}
#quote-popup #quote-popup-content .quote-form .quote-form-content .form {
font-size: 0;
position: relative;
}
#quote-popup #quote-popup-content .quote-form .quote-form-content .form input[type="text"] {
margin-bottom: 10px;
background: #fdfdfd;
}
#quote-popup #quote-popup-content .quote-form .quote-form-content .form select {
margin-bottom: 10px;
background: #fdfdfd;
}
#quote-popup #quote-popup-content .quote-form .quote-form-content .form input[type="text"].last,
#quote-popup #quote-popup-content .quote-form .quote-form-content .form select {
margin-right: 0;
}
#quote-popup #quote-popup-content .quote-form .quote-form-content .form .slider {
margin-bottom: 30px;
}
#quote-popup #quote-popup-content .quote-form .quote-form-content .form button {
display: block;
margin-top: 15px;
}
#quote-popup #quote-popup-content .quote-form .quote-form-thanks {
position: absolute;
width: 100%;
height: 100%;
background: rgba( 253, 253, 253, 0.85);
top: 0;
left: 0;
font-size: 16px;
color: #2C3459;
font-weight: 300;
display: none;
}
#quote-popup #quote-popup-content .quote-form .quote-form-thanks .quote-form-thanks-content {
width: 300px;
margin: 150px auto 0 auto;
text-align: center;
line-height: 1.6em;
}
#quote-popup #quote-popup-content .quote-form .quote-form-thanks .quote-form-thanks-content .quote-form-thanks-close {
text-decoration: underline;
cursor: pointer;
}
#quote-popup #quote-popup-content .quote-form .quote-form-thanks .quote-form-thanks-content .quote-form-thanks-close:hover {
text-decoration: none;
}
Beauty, the javascript I leave as it is? I do not touch it?
– Pedro Henrique Kuzminskas
@Pedrohenriquekuzminskas What part of your code moves the popup to another div (or line)?
– Klaider
I couldn’t put the code here, I put it in another answer, I did it right?
– Pedro Henrique Kuzminskas