Augmenter la hauteur de l'arrière-plan pop-up

Question

Je veux augmenter la hauteur de l'arrière-plan pop-up, tout en sélectionnant des éléments de la liste déroulante. L'arrière-plan de la popup doit être égale à la hauteur de la liste déroulante lors de la sélection des éléments .

Aussi, si je clique sur l'extérieur de l'arrière-plan popup, il disparaît. Je veux afficher le fond pop-up jusqu'à ce que tous les éléments sélectionnés dans la liste déroulante.

Html

<div class="maintext"> 
    <h2> Main text goes here...</h2> 
</div> 
<div id="boxes"> 
    <div id="dialog" class="window"> 
     <div id="san"> 
      <section> 
       <select class="cs-select cs-skin-elastic"> 
        <option value="" disabled selected>Select a Country</option> 
        <option value="france" data-class="flag-france">France</option> 
        <option value="brazil" data-class="flag-brazil">Brazil</option> 
        <option value="argentina" data-class="flag-argentina">Argentina</option> 
        <option value="south-africa" data-class="flag-safrica">South Africa</option> 
       </select> 
      </section> 
     </div> 
    </div> 
    <div style="width: 2478px; font-size: 32pt; color: white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div> 
</div> 

CSS

#mask { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:9000; 
    background-color:#26262c; 
    display:none; 
} 
#boxes .window { 
    position:absolute; 
    left:0; 
    top:0; 
    width:440px; 
    height:850px; 
    display:none; 
    z-index:9999; 
    padding:20px; 
    border-radius: 5px; 
    text-align: center; 
} 
#boxes #dialog { 
    width:450px; 
    height:auto; 
    padding: 10px 10px 10px 10px; 
    background-color:#ffffff; 
    font-size: 15pt; 
} 

.agree:hover{ 
    background-color: #D1D1D1; 
} 
.popupoption:hover{ 
    background-color:#D1D1D1; 
    color: green; 
} 
.popupoption2:hover{ 
    color: red; 
} 

Jquery

$(document).ready(function() { 

     var id = '#dialog'; 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set heigth and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(500); 
     $('#mask').fadeTo("slow",0.9); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000);  

    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     $('#mask').hide(); 
     $('.window').hide(); 
    });  

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    });  

}); 

DEMO HERE

Answer 1

Ajouter ce javascript à votre code, il résoudra votre problème de hauteur. Il faudra également restreindre pour fermer la fenêtre contextuelle si la case de sélection n'est pas encore sélectionnée. Une fois que vous sélectionnez une valeur de select options, vous serez en mesure de faire disparaître votre popup.

$(document).ready(function() { 

    var id = '#dialog'; 

    //Get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 

    //Set heigth and width to mask to fill up the whole screen 
    $('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //transition effect  
    $('#mask').fadeIn(500); 
    $('#mask').fadeTo("slow",0.9); 

    //Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    //Set the popup window to center 
    $(id).css('top', winH/2-$(id).height()/2); 
    $(id).css('left', winW/2-$(id).width()/2); 

    //transition effect 
    $(id).fadeIn(2000);  

//if close button is clicked 
$('.window .close').click(function (e) { 
    //Cancel the link behavior 
    e.preventDefault(); 

    $('#mask').hide(); 
    $('.window').hide(); 
});  

//if mask is clicked 
$('#mask').click(function() { 
    var val = $(".cs-select option:selected").text(); 
    if(val == 'Select a Country'){ 
    return; 
    } 
    $(this).hide(); 
    $('.window').hide(); 
});   

    $(document).click(function() { 
     if (!$(".cs-select ").is(":focus")) { 
     $('#dialog').css({'height':23}); 
     }else{ 
     var height = 17; 
     $('.cs-select option').each(function (item) { 
     height = height +17; 
     }) 
     if($('#dialog').height() < 25){ 
     $('#dialog').css({'height':height}); 
     }else{ 
    $('#dialog').css({'height':23}); 
     } 
    } 
    }); 

}); 

Essayez ce code. Il va définir votre hauteur de popup en fonction des options énumérées dans la sélection d'entrée. Peu importe combien d'options sont là, il va calculer la hauteur de façon dynamique.

Answer 2

Checkout cet extrait, en supposant que <select> hauteur est 20px.

$(document).ready(function() { \t 
 

 
\t \t var id = '#dialog'; 
 
\t 
 
\t \t //Get the screen height and width 
 
\t \t var maskHeight = $(document).height(); 
 
\t \t var maskWidth = $(window).width(); 
 
\t \t 
 
\t \t var selectElement = $('.cs-select'); 
 
\t \t 
 
\t \t selectElement.parent('section').css('height', (20 * selectElement.children().length) + 'px'); 
 
\t 
 
\t \t //Set heigth and width to mask to fill up the whole screen 
 
\t \t $('#mask').css({'width':maskWidth,'height':maskHeight}); 
 
\t \t 
 
\t \t //transition effect \t \t 
 
\t \t $('#mask').fadeIn(500); \t 
 
\t \t $('#mask').fadeTo("slow",0.9); \t 
 
\t 
 
\t \t //Get the window height and width 
 
\t \t var winH = $(window).height(); 
 
\t \t var winW = $(window).width(); 
 
       
 
\t \t //Set the popup window to center 
 
\t \t $(id).css('top', winH/2-$(id).height()/2); 
 
\t \t $(id).css('left', winW/2-$(id).width()/2); 
 
\t 
 
\t \t //transition effect 
 
\t \t $(id).fadeIn(2000); \t 
 
\t 
 
\t //if close button is clicked 
 
\t $('.window .close').click(function (e) { 
 
\t \t //Cancel the link behavior 
 
\t \t e.preventDefault(); 
 
\t \t 
 
\t \t $('#mask').hide(); 
 
\t \t $('.window').hide(); 
 
\t }); \t \t 
 
\t 
 
\t //if mask is clicked 
 
\t /* 
 
\t $('#mask').click(function() { 
 
\t \t $(this).hide(); 
 
\t \t $('.window').hide(); 
 
\t }); \t \t 
 
\t */ 
 
\t $(selectElement).on('change', function(){ 
 
\t \t $('#mask, .window').hide(); 
 
\t }); 
 
});

#mask { 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    z-index:9000; 
 
    background-color:#26262c; 
 
    display:none; 
 
} 
 
#boxes .window { 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    width:440px; 
 
    height:850px; 
 
    display:none; 
 
    z-index:9999; 
 
    padding:20px; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 
#boxes #dialog { 
 
    width:450px; 
 
    height:auto; 
 
    padding: 10px 10px 10px 10px; 
 
    background-color:#ffffff; 
 
    font-size: 15pt; 
 
} 
 

 
.agree:hover{ 
 
    background-color: #D1D1D1; 
 
} 
 
.popupoption:hover{ 
 
\t background-color:#D1D1D1; 
 
\t color: green; 
 
} 
 
.popupoption2:hover{ 
 
\t color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
       <div class="maintext"> 
 
<h2> Main text goes here...</h2> 
 
</div> 
 
<div id="boxes"> 
 
        <div id="dialog" class="window"> 
 
         <div id="san"> 
 
          <section> 
 
           <select class="cs-select cs-skin-elastic"> 
 
            <option value="" disabled selected>Select a Country</option> 
 
            <option value="france" data-class="flag-france">France</option> 
 
            <option value="brazil" data-class="flag-brazil">Brazil</option> 
 
            <option value="argentina" data-class="flag-argentina">Argentina</option> 
 
            <option value="south-africa" data-class="flag-safrica">South Africa</option> 
 
            <option value="france" data-class="flag-france">France</option> 
 
            <option value="brazil" data-class="flag-brazil">Brazil</option> 
 
            <option value="argentina" data-class="flag-argentina">Argentina</option> 
 
            <option value="south-africa" data-class="flag-safrica">South Africa</option> 
 
           </select> 
 
          </section> 
 
         </div> 
 
        </div> 
 
        <div style="width: 2478px; font-size: 32pt; color: white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div> 
 
       </div>

Answer 3

vérifier ci-dessous extrait, vous pouvez restaurer le height de dialog lorsque l'utilisateur sélectionnez le pays.

J'ai supprimé le code ci-dessous selon votre requirment

$('#mask').click(function() { 
    $(this).hide(); 
    $('.window').hide(); 
}); 

$(document).ready(function() { \t 
 

 
\t \t var id = '#dialog'; 
 
\t 
 
\t \t //Get the screen height and width 
 
\t \t var maskHeight = $(document).height(); 
 
\t \t var maskWidth = $(window).width(); 
 
\t 
 
\t \t //Set heigth and width to mask to fill up the whole screen 
 
\t \t $('#mask').css({'width':maskWidth,'height':maskHeight}); 
 
\t \t 
 
\t \t //transition effect \t \t 
 
\t \t $('#mask').fadeIn(500); \t 
 
\t \t $('#mask').fadeTo("slow",0.9); \t 
 
\t 
 
\t \t //Get the window height and width 
 
\t \t var winH = $(window).height(); 
 
\t \t var winW = $(window).width(); 
 
       
 
\t \t //Set the popup window to center 
 
\t \t $(id).css('top', winH/2-$(id).height()/2); 
 
\t \t $(id).css('left', winW/2-$(id).width()/2); 
 
\t 
 
\t \t //transition effect 
 
\t \t $(id).fadeIn(2000); \t 
 
\t 
 
\t //if close button is clicked 
 
\t $('.window .close').click(function (e) { 
 
\t \t //Cancel the link behavior 
 
\t \t e.preventDefault(); 
 
\t \t 
 
\t \t $('#mask').hide(); 
 
\t \t $('.window').hide(); 
 
\t }); \t \t 
 
\t 
 
\t //if mask is clicked 
 
\t /*$('#mask').click(function() { 
 
\t \t $(this).hide(); 
 
\t \t $('.window').hide(); 
 
\t });*/ \t \t 
 
    
 
    $("select.cs-select").on('click', function(){ 
 
    \t $("#dialog").height($('select.cs-select option').length*22) 
 
    }) 
 
    
 
\t 
 
});

#mask { 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    z-index:9000; 
 
    background-color:#26262c; 
 
    display:none; 
 
} 
 
#boxes .window { 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    width:440px; 
 
    height:850px; 
 
    display:none; 
 
    z-index:9999; 
 
    padding:20px; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 
#boxes #dialog { 
 
    width:450px; 
 
    height:auto; 
 
    padding: 10px 10px 10px 10px; 
 
    background-color:#ffffff; 
 
    font-size: 15pt; 
 
} 
 

 
.agree:hover{ 
 
    background-color: #D1D1D1; 
 
} 
 
.popupoption:hover{ 
 
\t background-color:#D1D1D1; 
 
\t color: green; 
 
} 
 
.popupoption2:hover{ 
 
\t color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="maintext"> 
 
<h2> Main text goes here...</h2> 
 
</div> 
 
<div id="boxes"> 
 
        <div id="dialog" class="window"> 
 
         <div id="san"> 
 
          <section> 
 
           <select class="cs-select cs-skin-elastic"> 
 
            <option value="" disabled selected>Select a Country</option> 
 
            <option value="france" data-class="flag-france">France</option> 
 
            <option value="brazil" data-class="flag-brazil">Brazil</option> 
 
            <option value="argentina" data-class="flag-argentina">Argentina</option> 
 
            <option value="south-africa" data-class="flag-safrica">South Africa</option> 
 
           </select> 
 
          </section> 
 
         </div> 
 
        </div> 
 
        <div style="width: 2478px; font-size: 32pt; color: white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div> 
 
       </div>