jQuery Наложение, чтобы сосредоточиться только на конкретном div. Нет плагинов, пожалуйста?

Question

Я пытаюсь добиться модального наложения с помощью jQuery.

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

Как это можно сделать?

Я написал следующее: CODE ирезультат ЗДЕСЬ

Я не могу сосредоточиться только на div.Для меня фон также активен.Как отключить область, отличную от всплывающего div?

HTML:

<div id="mainContainer">
  I am in the main body section.               
</div>
<input type="button" value="Show Overlay" id="btn">        
<div id="overlayContainer">
    I am in the Overlay Section<span style="float:right"><a class="alink" href="javascript:void(0);">X</a></span>
</div>

JS:

$(function() {
    $("#btn").click(function() {
        $("#overlayContainer").fadeIn();
        $("#mainContainer");
    })
    $(".alink").click(function() {
        $(this).parent().parent().hide();
    });
})

Css:

#mainContainer{border:2px solid red;width:700px;height:500px;margin:0 auto;}
#overlayContainer{background:#c0c0c0;width:300px;height:400px;right:500px;border:2px dotted blue;margin-top:-460px;display:none;position:fixed;}
input{text-align:center;margin-left:300px;margin-top:18px;position:fixed;}

Answer 1

Вы запросили никаких плагинов, но затем отметили свой вопрос jquery-ui , который сам является плагином.Во-первых, вот ваш ответ jQuery-UI:

$("#overlayContainer").dialog({ modal: true });

http://jsfiddle.net/AMM2M/5/

А вот ваш ответ без плагинов:

Закройте всю страницу разделительным наложением, затемпоместите всплывающий div над этим.Чтобы отобразить всплывающее окно, отобразите и скройте общий контейнер.

http://jsfiddle.net/AMM2M/6/

<div class="popup">
    <div class="overlay"></div>
    <div class="content">
        popup content here
    </div>
</div>

.popup {
    display: none;
}
.popup .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 90;
}
.popup .content {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 300px;
    margin-left: -150px;
    margin-top: -200px;
    background: #fff;
    z-index: 91;
}

$(".popup").show();

^{Ответ с моего телефона Windows 7}

Answer 2

Является ли этим , о чем вы думали?

jquery part ...

$(document).ready(function() {

    $('#lightbox_button').click(function() {
         $('#lightbox').fadeIn('slow');
         $('#lightbox_panel').fadeIn('slow');
    });

    $('#close_lightbox').click(function() {
        $('#lightbox').fadeOut('slow');
        $('#lightbox_panel').fadeOut('slow');
    });

});

HTML

<div id="wrapper">

<a href="#" id="lightbox_button">
    <div class="button">button</div>
</a>

    <div id="lightbox_panel">

        <h1>lightbox panel</h1>

        <a href="#" id="close_lightbox">
            <div class="button">close</div>
        </a>

    </div>

</div>

<div id="lightbox"></div>

CSS

#lightbox_panel 
{ 
   position: relative;
   z-index: 99; 
   width: 500px;
   height: 100px; 
   margin: 30px auto 0;
   background-color: #CCC;
   display: none;
   padding: 10px;
}

#lightbox 
{ 
   z-index: 90;
   position: absolute;
   background-color: #000;
   opacity: 0.8;
   filter: alpha(opacity=80);
   width: 100%;
   height: 100%;
   display: none;
   top: 0;
}

.button 
{ 
   position: absolute;
   text-decoration: none; 
   padding: 2px 10px; 
   border: 1px solid #000;
   display: inline-block; 
   bottom: 10px;
   left: 50%;
}

если это не так, дайте мне знать, я постараюсь вам помочь.Если вам нужно какое-либо объяснение в отношении jQuery, дайте мне знать.

Answer 3

Юо может иметь дополнительный серый слой, размещенный под вашим оверлеем с прозрачностью на 50%, растянутой до размера 100%.