Блог

Главная - Вопросы по программированию - Javascript, html и css для создания наложения

Javascript, html и css для создания наложения

#javascript #asp.net #html #css #forms

#javascript #asp.net #HTML #css #формы

Вопрос:

Я застрял на некоторое время со следующей проблемой. Я создал веб-сайт, который содержит наложения. Наложение размещается в html, как показано ниже;

 <html>
<body>
    <div id="overlay"></div>
    <div id="wrapper">
        <!--More html - snipped-->
        <div id="search">
            <form method="post" action="Default.aspx?id=999" id="searchForm">
                <label for="searchInput">Your searchcriteria:</label>
                <input type="text" id="searchInput" />
            </form>
        </div>
        <!--More html - snipped-->
    </div>
</html>

css для наложения и поиска по div #, как показано ниже. Существует немного больше css для оформления элементов формы внутри div # search, но поскольку я не думаю, что это актуально, я опустил это.

 div#search
{
    clear:both;
    width:990px;
    height:50px;
    z-index:1002;
    display:none;
    position:absolute;
    margin:49px 0px 0px 0px;
    background-color:#FFF;
}

#overlay
{
    background-color:#000;
    position:fixed;
    opacity:0.7;
    display:none;
    z-index:1001;
    width:100%;
    height:100%;
    top:0;
    left:0;
}

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

 function showSearchBar() {
    //Check if search bar is shown, if it is hide it, otherwise show it.
    var isVisible = $("#search").is(":visible");

    if (isVisible) {
        //Hide the div
        $("#search").fadeOut(600);

        //hide the overlay
        $("#overlay").hide();
    }
    else {
        //Show the overlay
        $("#overlay").show();

        //Show the hidden div
        $("#search").fadeIn(600);
        //$("input#searchInput").watermark("Enter your criteria");
    }
}

Проблема здесь в том, что всякий раз, когда выполняется javascript, наложение размещается в верхней части страницы, отключая все остальные элементы на странице, включая форму поиска. Я хочу, чтобы форма поиска была доступна пользователям, поэтому она должна находиться поверх наложения. Вероятно, это очень маленькая проблема, но я не вижу здесь проблемы. Что является причиной размещения наложения поверх формы поиска вместо того, чтобы форма поиска находилась поверх наложения?

Ответ №1:

Проблема решена. Я изменил html, чтобы он выглядел следующим образом;

 <html>
<body>
    <div id="search">
        <form method="post" action="Default.aspx?id=999" id="searchForm">
            <label for="searchInput">Your searchcriteria:</label>
            <input type="text" id="searchInput" />
        </form>
    </div>    
    <div id="overlay"></div>
    <div id="wrapper">
        <!--More html - snipped-->
    </div>
</html>

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