Javascript, CSS: отображение скрытого div не работает?

Question

Я знаю, что это вопрос, который был задан сто раз, но я не могу понять, почему он не работает на моем сайте.

Javascript:

<script> 
    function show(boxid){ 
    document.getElementById(boxid).style.visibility="visible"; 
    } 

    function hide(boxid){ 
    document.getElementById(boxid).style.visibility="hidden"; 
    } 
</script> 

HTML (PHP генерироваться):

echo '<div id="selectedBookingActionLink">'; 
    echo '<a href="#" onClick="show(cancelPopUp)">Cancel</a>'; 
echo '</div>'; 

echo '<div id="cancelPopUp">'; 
    echo '<div class="question">Cancel?</div>'; 
    echo '<div class="answer">Yes</div>'; 
    echo '<div class="answer">No</div>'; 
echo '</div>'; 

CSS:

#cancelPopUp 
{ 
    width: 260px; 
    height: 80px; 
    visibility: hidden; 
} 

Как вы можете видеть, что я пытаюсь изменить свойство видимости div cancelPopUp, когда пользователь нажимает ссылку «Отменить». Я провел некоторое исследование и обнаружил, что то, что я делаю, должно работать. Однако всплывающее окно не появляется.

Answer 1

Вы должны использовать кавычки при переходе идентификатор DIV к show функции:

echo '<a href="#" onClick="show(\'cancelPopUp\')">Cancel</a>'; 

Answer 2

Я разместил рабочую версию кода здесь → http://jsfiddle.net/matbloom/uHQsd/

1. Во-первых, убедитесь, что вы разместили свой JS в голове вашего документа над телом.

2. Во-вторых, не забудьте добавить одинарные кавычки внутри onClick.

   <a href="#" onClick="show('cancelPopUp')">Cancel</a> 
   

3. В-третьих, я хотел бы предложить, используя свойство «Дисплей» против «видимости».

Кроме того, я предоставил простую функцию переключения, которая может работать лучше для вашего приложения.

Надеюсь, это поможет!

HTML:

<div id="selectedBookingActionLink"> 
    <a href="#" onClick="show('cancelPopUp')">Cancel</a> 
</div> 

<div id="cancelPopUp" style="display:none;"> 
    <div class="question">Cancel?</div> 
    <div class="answer">Yes</div> 
    <div class="answer">No</div> 
</div> 

CSS:

#cancelPopUp { 
    width: 260px; 
    height: 80px; 
} 

JS:

function show(boxid) { 
    document.getElementById(boxid).style.display = "block"; 
} 

function hide(boxid) { 
    document.getElementById(boxid).style.display = "none"; 
} 

/* Optional toggle function */ 
function toggle(boxid) { 
    var e = document.getElementById(boxid); 
    if (e.style.display == "block") { 
     e.style.display = "none"; 
    } else { 
     e.style.display = "block"; 
    } 
}