Проблема с отображением CSS всплывающего окна - PullRequest
Новая
       0

Проблема с отображением CSS всплывающего окна

0 голосов
/ 24 сентября 2010

У меня возникли проблемы с отображением всплывающего элемента div с помощью CSS. Проблема лучше объяснена на примере. Возьмите следующий HTML: 

<html>
    <head>
        <style type"text/css">
            #popup {
                color: #fff;
                background: #8c0000
            }

            #form {
                background: #ccc;
                color: #000;
                position: absolute;
                display: none;
            }

            #popup:hover > #form {
                display: block;
            }
        </style>
    </head>
    <body>
        <span id="popup">
            Popup 
            <div id="form">
                <form>
                    <label>Text Field</label>
                    <input type="text" />
                    <label>Select Field</label>
                    <select>
                        <option value="opt1">val1</option>
                        <option value="opt2">val2</option>
                    </select>
                </form>
            </div>
        </span>
    </body>
</html>

Состоит из одного элемента span и одного скрытого элемента div, который содержит форму. Div отображается, когда мышь наводит курсор на элемент span. Проблема в том, что когда я собираюсь выбрать опцию в выпадающем списке, div исчезает, как будто он потерял фокус В результате я могу изменить раскрывающееся значение только с помощью клавиатуры.

Мой вопрос: как мне это исправить? Любая подсказка по этому вопросу приветствуется.

Ответы [ 3 ]

1 голос
/ 24 сентября 2010

Я полагаю, что вам может не повезти, поскольку отображение элементов <option> зависит от браузера / ОС / платформы, а не от блочной модели CSS. Используя JavaScript (и jQuery), это довольно просто. Я добавил кнопку «Готово» в вашу форму, так как это может быть лучшим решением для выбора, когда скрывать форму. В противном случае пользователь должен быть очень осторожным, чтобы не перемещать указатель мыши за пределы выпадающего списка, иначе все исчезло бы (если я правильно понял ваш запрос.) 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type"text/css">
            #popup {
                color: #fff;
                background: #8c0000
            }

            #form {
                background: #ccc;
                color: #000;
                position: absolute;
                display: none;
            }
        </style>

        <script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
        <script language="javascript">
        function showForm() {
            $("#form").show();
        }
        function hideForm() {
            $("#form").hide();
        }
        </script>
    </head>
    <body>
        <span id="popup" onmouseover="showForm()">
            Popup 
            <div id="form">
                <form>
                    <label>Text Field</label>
                    <input type="text" />
                    <label>Select Field</label>
                    <select>
                        <option value="opt1">val1</option>
                        <option value="opt2">val2</option>
                    </select>
                    <input type="button" value="Done" onclick="hideForm()" />
                </form>
            </div>
        </span>
    </body>
</html>
1 голос
/ 24 сентября 2010

Я не уверен, в чем конкретно проблема, но следующий CSS работает в Chrome 6.0.472.62 и Firefox 3.6.10 в Ubuntu 10.04: 

#popup {
    position: relative;
}
#form {
    width: 12em;
    display: none;
}
#popup:hover #form {
    clear: both;
    margin: 0;
    display: block;
    position: absolute;
    top: 1em;
    left: 0;
}
#popup form select:focus,
#popup form select:hover {
    display: block;
}

Демонстрация в: jsbin

И стоит поменять #popup на div, как (я думал я) прокомментировал ранее.

0 голосов
/ 24 сентября 2010

Вы показываете всплывающее окно только при наведении, поэтому, когда мышь покидает ваше всплывающее окно, оно скрывается,

Вы должны показать его при наведении мыши на элемент span и скрыть его, когда пользователь нажимает на другое место на странице (кроме всплывающего 1004 *) или, возможно, когда он нажимает close опция во всплывающем окне.

Я не думаю, что вы можете сделать это с помощью чистого CSS. Вам понадобится JavaScript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...