1

Есть простенький скрипт, который позволяет открывать popup окно на странице. Подскажите, как нужно изменить этот скрипт, чтобы с его помощью можно было открывать несколько popup-окон на странице?

Подготовил пример:

#Fpp-background {
	display: none;
	position: fixed;
	z-index: 100;
	opacity: 0.8;
	overflow: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.925);
}
#Fpp-window {
	display: none;
	background: #fff;
	position: fixed;
	z-index: 200;
	height: auto;
	margin: 70px auto;
    text-align: center;
    overflow-y: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 40px;
}
<script type="text/javascript">
	//Функция показа
	function show(state){
		document.getElementById('Fpp-window').style.display = state;
		document.getElementById('Fpp-background').style.display = state;
		}
</script>	
<div onclick="show('none')" id="Fpp-background"></div>

<!--01-->
<div id="Fpp-window">
  <p>Hide text</p>
  <button onclick="show('none')">Close</button>
</div>
<a href="#open" onclick="show('block')"><!--Открыть-->
  <p>Click open 01</p>
</a>

<!--02-->
<div id="Fpp-window">
  <p>Hide text 02</p>
  <button onclick="show('none')">Close</button>
</div>
<a href="#open" onclick="show('block')"><!--Открыть-->
  <p>Click open 02</p>
</a>

Здесь Click open 01 работает, как надо. А Click open 02 уже нет. Подозреваю, что задача очень простая для тех, кто знает javascript.

1 ответ 1

4

Дело в том, что id это уникальный элемент на странице, а у вас 2 блока с одинаковым id, поэтому когда вы вызываете getElementById('Fpp-window') он находит первый и применяет действия к нему.

Чтобы прописать один стиль, разным блокам, в css используют классы.

Вот Ваш рабочий пример:

#Fpp-background {
    display: none;
    position: fixed;
    z-index: 100;
    opacity: 0.8;
    overflow: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.925);
}
.Fpp-window {
    display: none;
    background: #fff;
    position: fixed;
    z-index: 200;
    height: auto;
    margin: 70px auto;
    text-align: center;
    overflow-y: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 40px;
}
<script type="text/javascript">
    //Функция показа
    function show(state, id){
        if(id!=null)
        document.getElementById(id).style.display = state;
         else{
            document.getElementById('Fpp-window').style.display = state;
            document.getElementById('Fpp-window-second').style.display = state;
         }
    document.getElementById('Fpp-background').style.display = state;
    }
</script>   
<div onclick="show('none')" id="Fpp-background"></div>

<!--01-->
<div id="Fpp-window" class="Fpp-window">
  <p>Hide text</p>
  <button onclick="show('none', 'Fpp-window')">Close</button>
</div>
<a href="#open" onclick="show('block', 'Fpp-window')"><!--Открыть-->
  <p>Click open 01</p>
</a>

<!--02-->
<div id="Fpp-window-second" class="Fpp-window">
  <p>Hide text 02</p>
  <button onclick="show('none', 'Fpp-window-second')">Close</button>
</div>
<a href="#open" onclick="show('block', 'Fpp-window-second')"><!--Открыть-->
  <p>Click open 02</p>
</a>

1
  • Komdosh, благодарю! Вы мне помогли, скрипт работает как надо.
    – ov seo
    19 авг 2016 в 6:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.