Изменение отображения из блока в none, Проблемы с отображением div

Это мой первый вопрос здесь, и я попытался найти довольно долгое время, и я не нашел никаких вопросов, которые бы совпадали с моими или касались та же проблема.Изменение отображения из блока в none, Проблемы с отображением div

Я хочу сделать всплывающее окно CSS, в котором есть фон-div, охватывающий весь веб-сайт и центрированный div, показывающий фактическое содержание.

Моя проблема заключается в том, что появляется только центрированный div, когда я нажимаю кнопку, которая должна показывать им обоим. Даже когда я прокомментирую атрибут - в моем css-файле, у div div нет никакого цвета или стиля, прикрепленных к нему. Если я заполню его текстом, текст появится на веб-сайте, где div будет «предположительно», если к нему не будет прикреплена таблица стилей.

Я получил код от coder s ответ в this question.

Здесь:

Сценарий:

$("#btn-update").click(function() { 
     document.getElementById("light").style.display="block"; 
     document.getElementById("blackground").style.display="block"; 
});

HTML:

<button type="button" id="btn-update">Button!</button> 
<div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> 
<div id="blackground" class="black_overlay"></div>

CSS:

.black_overlay{ 
    /*display: none;*/ 
    position: absolute; 
    top: 10%; 
    left: 10%; 
    width: 100%; 
    height: 100%; 
    background-color: #000000; 
    z-index:1001; 
    /*-moz-opacity: 0.8;*/ 
    /*opacity:.80;*/ 
    /*filter: alpha(opacity=80);*/ 
} 
.white_content { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 15%; 
    height: 15%; 
    padding: 16px; 
    border: 16px solid orange; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
}

Here's the fiddle-demo so you can play around as well

Я попытался изменить атрибуты, комментируя их, делая DIV видимый с самого начала идти, но всегда кажется, не показывать правильно (в то время как white_content всегда делают).

Также: У JS-скрипта возникают проблемы с отображением белого содержимого, но черное оверлейное изображение отлично отображается, когда вы удаляете атрибут display:none.

Благодарим вас за любую помощь. Застрял на некоторое время теперь

источник

2014-01-31 Avslutarn

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

Вам нужно прикрепить jquery plugin в jsfiddle http://jsfiddle.net/dhana36/K57DH/12/

После обновления http://jsfiddle.net/dhana36/K57DH/20/

UPDATE:

HTML КОД:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.black_overlay{ 
/* display: none;*/ 
    position: absolute; 
    top: 10%; 
    left: 10%; 
    width: 50%; 
    height: 50%; 
    background-color: #000000; 
    z-index:1001; 
/* -moz-opacity: 0.8;*/ 
/* opacity:.80;*/ 
/* filter: alpha(opacity=80);*/ 
} 
.white_content { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 15%; 
    height: 15%; 
    padding: 16px; 
    border: 16px solid orange; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
} 

</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("#btn-update").click(function() { 
    document.getElementById("light").style.display="block"; 
    document.getElementById("blackground").style.display="none"; 
    //document.getElementById("blackground").style.background-color="#555555"; 
}); 
}); 
</script> 
</head> 
<body> 
<div id="light" class="white_content"> 
    This is the lightbox content. 
    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'"> 
     Close 
    </a> 
</div> 
<div id="blackground" class="black_overlay"></div> 

<button type="button" id="btn-update">Button!</button> 
</body> 
</html>

источник

2014-01-31 08:22:53 dhana

Спасибо, теперь он работает в скрипке. Но не в моем браузере Chrome. Любые идеи? Это только один из тех браузеров, где он работает в одном, но не в другом? – Avslutarn

Я проверил ваш код в хроме. Он работает нормально. – dhana

@Avslutarn Они означают, что в '' '' скрипт src = "http://code.jquery.com/jquery-1.10.1.min.js"> '. – Ruddy

Добавьте скрипт перед закрытием </body> не внутри </head> же код не работает, когда обернутый в head http://jsfiddle.net/K57DH/18/редактирования в левой панели

источник

2014-01-31 08:29:03 VenomVendor

Изменение отображения из блока в none, Проблемы с отображением div

ответ

Смежные вопросы