ポップアップバックラウンドの高さを増やす

Question

ドロップダウンリストからアイテムを選択すると、ポップアップバックグラウンドの高さを上げたい。アイテムの選択時に、ポップアップの背景とドロップダウンリストの高さが等しくなければならない。

また、ポップアップの背景の外側をクリックすると消えます。私はドロップダウンリストから選択された項目までポップアップバックグラウンドを表示したい。

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

あなたのコードにこのjavascriptを追加し、それはあなたの高さの問題を解決します。選択ボックスがまだ選択されていない場合、クローズポップアップにも制限されます。 select optionsから任意の値を選択すると、ポップアップが消えるようになります。

$(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}); 
     } 
    } 
    }); 

}); 

このコードを試してください。選択入力にリストされているオプションに従ってポップアップの高さを設定します。どれだけ多くのオプションがあっても、それは動的に高さを計算します。

Answer 2

<select>の高さが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

スニペットを確認すると、ユーザーが国を選択したときにheightがdialogに戻ることがあります。

私は高さが固定された20ピクセルであるここで見ることができますあなたの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>