Запуск функции javascript при открытии модального окна в css

При нажатии на тег привязки я могу открыть модальное окно. Однако функция onClick, которую я запускаю, похоже, не вызывает вызова. Я хочу, чтобы модальное окно всплывало и добавляло к нему изображение через Javascript. Ниже приведен применимый код:

HTML

<a href="#openModal" onclick="return displayPhoto();" target="_blank">Submit</a>

<div id="openModal">
 <div>
 <table>
 <tbody><tr>
 
 <td id="description">
 </td>
 </tr>
 </tbody></table>
 </div>
</div>

CSS

.modalDialog {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.8);
 z-index: 99999;
 opacity:0;
 -webkit-transition: opacity 400ms ease-in;
 -moz-transition: opacity 400ms ease-in;
 transition: opacity 400ms ease-in;
 pointer-events: none;
}

.modalDialog:target {
 opacity:1;
 pointer-events: auto;
}

.modalDialog > div {
 width: 600px;
 position: relative;
 margin: 5% auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background: #fff;
 background: -moz-linear-gradient(#fff, #999);
 background: -webkit-linear-gradient(#fff, #999);
 background: -o-linear-gradient(#fff, #999);
}

#photo{
 width:auto;
}

Javascript

function displayPhoto(){
 window.alert(11);
 document.getElementById('photo').innerHTML = "";
 return true;
}
2 ответа

Вот JSFiddle. Как отметил @Maverick, у вас была строка с вашей линией getElementById.

http://jsfiddle.net/tz1att9j/5/

function displayPhoto(){
 alert(11);
 document.getElementById('photo').innerHTML = "";
 return true;
}


Вам нужно избегать ваших котировок в innerHTML

document.getElementById('photo').innerHTML = "";

licensed under cc by-sa 3.0 with attribution.