Модал начальной загрузки не закрывается после сброса тела HTML - PullRequest
Новая
       5

Модал начальной загрузки не закрывается после сброса тела HTML

0 голосов
/ 20 января 2019

У меня есть кнопки printModal и closeModal на моем моде начальной загрузки.Модал не закрывается после запуска логики печати. ​​

Шаг 1: Нажмите на printModal после загрузки всплывающего окна.(работает отлично). Шаг 2: Закройте диалоговое окно печати браузера (работает нормально, диалоговое окно печати закрывается и модальный загрузчик все еще виден). Шаг 3: Нажмите на closeModal (FAILs, модальный не закрывается).

Если я нажму на closeModal, прежде чем нажать на printModal, он будет работать нормально.Он не работает только после первого запуска printModal. 

<div id="myModal" class="modal fade" role="dialog">
<div id="modalContent" class="modal-dialog modal-lg">
    <div class="modal-content">
    // more html


        <div class"buttons">
            <input type="submit" id="printButton" class="btn-lg" value="Print">
            <input type="submit" id="closeButton" class="btn-lg" data-dismiss="modal" value="Close">
        </div>
    </div>

    <script>
        $('#myModal').on('click', 'input#printButton', function () {

            var myCopy = document.body.innerHTML;
            var printThis = document.getElementById("modalContent").innerHTML;
            document.body.innerHTML = printThis;

            window.print();

            document.body.innerHTML = myCopy;

        });
    </script>
</div>

Ответы [ 2 ]

0 голосов
/ 20 января 2019

Попробуйте изменить input на button, как показано здесь .

Так это будет выглядеть так: 

<div class"buttons">
   <input type="submit" id="printButton" class="btn-lg" value="Print">
   <button id="closeButton" class="btn-lg" data-dismiss="modal">Close</button>
</div>
0 голосов
/ 20 января 2019

Это потому, что вы меняете весь код HTML вашей страницы, а также весь DOM с помощью этого кода: 

document.body.innerHTML = printThis;

Функции javascript, которые были связаны с элементами DOM, теперь исчезли, равно как и событие click на кнопке закрытия.

Что вы можете сделать, это изменить CSS для печати так, чтобы было видно только модальное содержимое.

В качестве альтернативы вы можете открыть всплывающее окно, добавить туда модальное содержимое, распечатать его и затем закрыть. Пример с всплывающим окном: 

var printPopup = window.open('');
printPopup.document.write(printThis);
printPopup.document.write(/ add some css or include a css file/);
printPopup.print();

Обратите внимание, что всплывающие окна не годятся для пользователя, поэтому вам следует сначала попробовать подход css модификации.

...