Выпуск Z-индекса во всплывающем div - PullRequest
Новая
       16

Выпуск Z-индекса во всплывающем div

0 голосов
/ 08 декабря 2011

Когда я нажимаю на кнопку на моей веб-странице, хочу открыть div, который принимает полную высоту и ширину, поэтому любые другие элементы не могут быть нажаты, пока div не закрыт.

Когда div доступен, я хочу щелкнуть только по определенному элементу веб-страницы. Пытался дать

popup div
z-индекс 10

и элемент z-индекс 1000, но это не сработало. Пожалуйста, укажите ваши предложения

1 Ответ

0 голосов
/ 08 декабря 2011

Что-то вроде этого должно работать или у вас, zindex должен быть проблемой, только если вы установили его где-то еще на своей странице.При использовании абсолютного положения он будет отображаться поверх всего, если нет столкновений с z-индексом. 

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $(".button").click(function(){
                togglePopUp()
            });

        });
        function togglePopUp(){
            if($(".popUp").is(":visible")){
                $(".popUp").css('display', 'none') ;
            }else{
                $(".popUp").css('display', 'block') ;
            }

        }
</script>
<style>
body{
    border:0;
    padding:0;
    margin:0;
    }
.popup{
position:absolute;
top:0;
left:0;
background-color:#000;
width:100%;
height:100%;
display:block;
z-index:10;
}
.close{
    float:left;
    margin-left:50px;
    color:red;
    }



</style>

    </head>
    <body>
    <div class="popUp" style="display: none"><div class="button close">close me</div></div>
    <div class="button">click me</div>


    </body>

</html>

Пример: размещено здесь

...