Put popup content in a div

Asked

Viewed 260 times

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;
}
javascript html css popup

2 answers

0


Simple! Remove the relative’s statement #quote-popup of the element #quote-popup-content in CSS, removing the properties left, top and position:

#quote-popup-content {
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;

    background: #fdfdfd;
    box-shadow: 0 0 7px rgba(15, 19, 36, 0.73);
    z-index: 99999;
}

Then you create a new style for the element #quote-popup-content declaring its relative element #quote-popup, then you set the fixed or absolute position on it:

#quote-popup #quote-popup-content {
    position: fixed;
    left: 50%;
    top: -10000px;
}

Hence, when moving the contents of the popup to the other div, only moves the widget with id #quote-popup-content.

  • Beauty, the javascript I leave as it is? I do not touch it?

  • @Pedrohenriquekuzminskas What part of your code moves the popup to another div (or line)?

  • I couldn’t put the code here, I put it in another answer, I did it right?

0

@The-Pro-hands

@Pedrohenriquekuzminskas What part of your code moves the popup to another div (or line)?

I’m moving this here:

                    <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>

if you want to see the page, http://moondigital.com.br/menegalli/simulacao.html

Browser other questions tagged javascript html css popup

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