Question

我想在点击同一链接时显示不同的弹出窗口。

CSS -

<style type="text/css" >
.overlay-bg1{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    cursor: pointer;
    background: #000; /* fallback */
    background: rgba(0,0,0,0.75);
}
.overlay-bg2{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    cursor: pointer;
    background: #000; /* fallback */
    background: rgba(0,0,0,0.75);
}
.overlay-bg3{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    cursor: pointer;
    background: #000; /* fallback */
    background: rgba(0,0,0,0.75);
}
.overlay-content{
    background: #fff;
    padding: 1%;
    width: 700px;
    height: 400px;
    overflow:auto;
    position: relative;
    top: 15%;
    left: 30%;
    margin: 0 0 0 -10%; /* add negative left margin for half the width to         center the div */
    cursor: default;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
</style>

JavaScript -

<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" >

$(document).ready(function(){

// show popup when you click on the link
    $('.show-popup').click(function(event){
        event.preventDefault()
        var e = document.getElementById("operators");
        var company = e.options[e.selectedIndex].text;

        if(company=='Aircel'){
            $('.overlay-bg1').parent().show(); //display your popup
        }
        else if(company=='Airtel'){
            $('.overlay-bg2').siblings().show();    
        }
        else if(company=='Idea'){
            $('.overlay-bg3').parent($('.overlay-content')).show(); 
        }

});

// hide popup when user clicks on close button
    $('.close-btn').click(function(){
        $('.overlay-bg1').hide(); // hide the overlay
    });

    $('.close-btn').click(function(){
        $('.overlay-bg2').hide(); // hide the overlay
    });

    $('.close-btn').click(function(){
        $('.overlay-bg3').hide(); // hide the overlay
    });

// hides the popup if user clicks anywhere outside the container
    $('.overlay-bg').click(function(){
        $('.overlay-bg1').hide();
    })
// prevents the overlay from closing if user clicks inside the popup overlay
    $('.overlay-content').click(function(){
        return false;
    });

});
</script>

HTML -

<body>
     <select onChange="val()" id="operators">
     <option value="airtel">Aircel</option>
     <option value="aircel">Airtel</option>
     <option value="Idea">Idea</option>
    </select>

    <p> <a class="show-popup" href="#">View Plans</a></p>
   <div class="overlay-bg1">
    <div class="overlay-content">
     <h2>AIRCEL</h2>
     <p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
     <button class="close-btn">Close</button>
  </div>
  </div>

  <div class="overlay-bg2">
    <div class="overlay-content">
     <h2>AIRTEL</h2>
   <p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
   <button class="close-btn">Close</button>
  </div>
  </div>

   <div class="overlay-bg3">
   <div class="overlay-content">
   <h2>Idea</h2>
   <p>Third SET OF INFORMATION DISPLAYED HERE</p>
   <button class="close-btn">Close</button>
    </div>
  </div>

</body>

我想要的是用户从列表中选择aircel的不同弹出窗口，如果airtel则弹出不同的等等。

Answer 1

请检查此代码。你不需要绑定关闭按钮多时间。希望您会发现此代码易于理解。 :)

$(function(){
    var selected;
    $("#operators").on('change', function(){
        selected = $(this).children('option:selected').text()
    })

    $('.show-popup').on('click', function(e){
        e.preventDefault()

        switch(selected) {
                case 'Aircel': 
                $('.overlay-bg1').show();
                break;
                case 'Airtel':
                $('.overlay-bg2').show();
                break;
                case 'Idea' :
                $('.overlay-bg3').show();
                break;
                default:
                $('.overlay-bg3, .overlay-bg1, .overlay-bg2').hide();
            } 

    });
    //click on close
    $('.close-btn').click(function(){
        $('.overlay-bg3, .overlay-bg1, .overlay-bg2').hide();
        })

})

点击同一链接显示不同的弹出窗口

1 个答案: