Открытие модала, требующего открытия два раза - PullRequest
Новая
       0

Открытие модала, требующего открытия два раза

0 голосов
/ 20 октября 2018

У меня на сайте проблема с моим модалом.Предполагается, что он вызывается значком рядом с тегами вставки.Хотя он работает для активации модального режима, он просто отображает модальный контент без чего-либо в нем;после закрытия модального режима и повторного щелчка по функции openModal () отображается нужный файл для встраивания.Затем при нажатии на другой документ он отображает предыдущий документ до тех пор, пока не будет закрыт и снова нажмет.Почему это происходит и что я должен сделать, чтобы это исправить?

HTML (но только с одним встраиванием): 

<div class = "overlay-cont">
     <embed src="link-to-pdf.pdf" > 
     <div class = "overlay">
         <img class = "enlarge-icon" src = "arrow-icon.svg" onclick ="openModal(0)"> 
     </div>
</div>

<div id = "myModal" class = "modal">
   <span class="close cursor" onclick="closeModal()">&times;</span>
   <div class="modal-content">
      <embed id = "currentDoc">
   </div>
</div>

JavaScript: 

var doc = document.getElementsByTagName("EMBED");

function openModal(n){
  document.getElementById("myModal").style.display = "block";
  document.getElementById("currentDoc").src = doc[n].src;

}

function closeModal(){
  document.getElementById("myModal").style.display = "none"
}

1 Ответ

0 голосов
/ 21 октября 2018

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

var doc = document.getElementsByTagName("EMBED");

        function openModal(n) {
            var modal = document.getElementById("myModal");
            modal.style.display = "block";
            var node = document.createElement("embed");
            var src_attr = document.createAttribute("src");
            src_attr.value = doc[n].src;
            node.setAttributeNode(src_attr);
            modal.appendChild(node);

        }

        function closeModal() {
            var e = document.querySelectorAll("embed")[1];
            e.parentNode.removeChild(e);
            document.getElementById("myModal").style.display = "none"
        }
<html>

<head>
</head>

<body>
    <div class="overlay-cont">
        <embed src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <div class="overlay">
            <img class="enlarge-icon" src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" onclick="openModal(0)">
        </div>
    </div>

    <div id="myModal" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content"></div>
    </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...