Как реализовать «всплывающее окно» как в gmail

Question

Я пытаюсь реализовать всплывающую панель, как на верхней панели Gmail.Если щелкнуть значок «Настройка», ваше имя или ссылку «Поделиться», откроется панель ... Есть ли плагин jquery или что-то, что позволит мне быстро реализовать что-то, что даст аналогичный эффект?

Answer 1

Если вы хотите использовать кросс-браузерное решение без jQuery, я сделал это для кого-то здесь вчера:

http://jsfiddle.net/Paulpro/H4CLU/

Выпадает при нажатии button и скрывается при повторном нажатии или в любом месте документа, который не является частью раскрывающегося списка.

Единственное, что вам нужно изменить, это, вероятно, некоторые CSS-элементы, чтобы красиво их стилизовать.

Answer 2

Вот jsFiddle , который показывает, как вы можете реализовать что-то подобное.

По сути, вы захватываете клики на элементе тела, если они нажимали на настройки, вы показываетеПанель "Див.Если они нажали на что-то другое, вы скрыли это.

JS:

$(function() {
    $('body').click(function(e) {
        if ($(e.target).attr('id') == 'settings') {
            $('#panel').show();
        } else {
            $('#panel').hide();
        }
    });
});

HTML:

<span id="settings">Settings</span>
<div id="panel">
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

CSS:

#panel { display: none;  border: 1px solid #000;}

Answer 3

Да, я предлагаю использовать jQuery (каждый раз, когда вы используете JS).Создать слой очень просто:

<div id="layer">content</div>
<a id="button" href="#">show</a>
<script type="text/javascript">
$(document)ready(function(){
    $('#layer').hide();
    $('#button').click(function(e){
        e.preventDefault();
        $('#layer').show();
    });
});
</script>