增加彈出背景的高度

我想增加彈出背景的高度，同時從下拉列表中選擇項目。彈出窗口的背景應等於下拉列表的高度，同時選擇項目。增加彈出背景的高度

此外，如果我點擊彈出的背景外，它消失。我想顯示彈出的背景，直到從下拉列表中選擇任何項目。

的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

來源

2017-02-21 Ivin Raj

這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}); 
     } 
    } 
    }); 

});

試試看看這個代碼。它會根據選擇輸入中列出的選項設置彈出高度。無論有多少選項，它都會動態計算高度。

來源

2017-02-21 10:51:00

一旦我選擇下拉列表的值，它的工作很好..again我選擇相同的價值，它不工作 –

@IvinRaj是的，你是對的，更新了我的答案。請立即檢查。 thnks –

是的，它工作得很好，謝謝@Manoj Lodhi –

檢出此片段，假設<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>

來源

2017-02-21 10:47:55

我可以在這裏看到的高度是固定的20像素。我想動態增加高度作爲下拉列表的高度@Vilas Kumkar –

@IvinRaj當你點擊中更新了我的帖子並增加了幾個選項，而jQuery代碼完成了其他事情來管理彈出的高度。 –

任何方式謝謝@維拉斯Kumkar –

查看下面的代碼片段，你可以在用戶選擇國家時恢復height的dialog。

我在下面的代碼刪除，按您的需求量的

$('#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>

來源

2017-02-21 10:52:32 aje

現在正在工作@aje如果我點擊彈出背景的外部，它會消失。我想顯示彈出的背景，直到從下拉列表中選擇任何項目。 –

檢查更新代碼 – aje

任何方式謝謝@aje –

增加彈出背景的高度

回答

相關問題