Закрытие и печать модального окна

@shmdarya · Регистрация: 31.10.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте. Есть модальное окно, необходима помощь в написании функционала по его закрытию.
А также, его печать. Сейчас печатается вся страница - содержимое, помимо самого модального окна.
Спасибо.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
    <form class="barcodeform">
      <div class="content" style="display: none;">
        <div id="barcode_panel" style="padding: 5px">
            <a class="hvr-bounce-out" href="#" style="text-align:center">
                <canvas height="1" id="barcodecanvas" style="padding-left:2em;visibility:hidden" width="1"></canvas> 
            </a>
        </div>
        <table class="header" width="100%">
          <tr>
            <td class="logo"><img src="/img.png" /></td>
            <td class="requisites">
            </td>
            <td class="logo_SetlGroup"><img src="/img.png"></td>
          </tr>
        </table>
 
        <table class="bodyLetter">
          <tr style="height: 40px;"></tr>
          <tr class="caption">
            <td colspan="7"></td>
          </tr>
          <tr>
            <td colspan="7" style="border: none;"></td>
          </tr>
          <tr class="barcode">
            <td colspan="7"></td>
          </tr>
        </table>
 
        <table class="signature">
         <tr>
                <td style="border:none; text-align: right;">Входящее письмо:</td>
                <td class="nameAttribute">рег.номер</td>
                <td class="valueAttribute 8635_18_modallist">№123456789</td>
            </tr>
            <tr>
                <td style="border:none">&nbsp;</td>
                <td class="nameAttribute">дата</td>
                <td class="valueAttribute 8635_30_modallist">ддммгг</td>
            </tr>
            <tr>
                <td style="border:none">&nbsp;</td>
                <td class="nameAttribute">Тема</td>
                <td class="valueAttribute 8635_12_modallist">тема письма</td>
            </tr>
        </table>
        <button onclick="window.print()" class="printBarcode">Печать</button>
      </div>
</form>

@atanov · 29.05.2018, 12:40

shmdarya, и где же у Вас тут модальное окно?

@shmdarya · 29.05.2018, 12:41 **[ТС]**

atanov, <form class="barcodeform">
эта форма и есть модальное окно

@atanov · 29.05.2018, 12:43

shmdarya, это не модальное окно, это элемент DOM. Как он появляется?

@shmdarya · 29.05.2018, 12:48 **[ТС]**

atanov, по кнопке

HTML5
1
<input class="cardButton" type="button" onclick="OpenListModal()" value="Печать маркерного листа">

JavaScript
1
2
3
function OpenListModal(){
    $(".barcodeform .content").show()
}

@atanov · 29.05.2018, 12:54

shmdarya, а дальше во 2-й строке у Вас:

Сообщение от shmdarya

Содержимое этого дива видно не будет. Сейчас видно? Если да, то что-то меняет стили этого элемента. И что Вам точно нужно: просто удалить эту форму из DOM или сделать div опять невидимым? И по какому событию?

@shmdarya · 29.05.2018, 13:24 **[ТС]**

atanov, сейчас оно скрыто. вызывается по кнопке, необходимо просто скрыть (сделать невидимым)
по какому событию, к сожалению не скажу, т.к. не обладаю знаниями(

@atanov · 29.05.2018, 13:34

shmdarya,

Сообщение от shmdarya

не обладаю знаниями(

Трудно Вам будет:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<meta charset = "utf-8">
    <form class="barcodeform">
      <div class="content" style="display: none;">
        <div id="barcode_panel" style="padding: 5px">
            <a class="hvr-bounce-out" href="#" style="text-align:center">
                <canvas height="1" id="barcodecanvas" style="padding-left:2em;visibility:hidden" width="1"></canvas> 
            </a>
        </div>
        <table class="header" width="100%">
          <tr>
            <td class="logo"><img src="/img.png" /></td>
            <td class="requisites">
            </td>
            <td class="logo_SetlGroup"><img src="/img.png"></td>
          </tr>
        </table>
 
        <table class="bodyLetter">
          <tr style="height: 40px;"></tr>
          <tr class="caption">
            <td colspan="7"></td>
          </tr>
          <tr>
            <td colspan="7" style="border: none;"></td>
          </tr>
          <tr class="barcode">
            <td colspan="7"></td>
          </tr>
        </table>
 
        <table class="signature">
         <tr>
                <td style="border:none; text-align: right;">Входящее письмо:</td>
                <td class="nameAttribute">рег.номер</td>
                <td class="valueAttribute 8635_18_modallist">№123456789</td>
            </tr>
            <tr>
                <td style="border:none">&nbsp;</td>
                <td class="nameAttribute">дата</td>
                <td class="valueAttribute 8635_30_modallist">ддммгг</td>
            </tr>
            <tr>
                <td style="border:none">&nbsp;</td>
                <td class="nameAttribute">Тема</td>
                <td class="valueAttribute 8635_12_modallist">тема письма</td>
            </tr>
        </table>
        <button onclick="window.print()" class="printBarcode">Печать</button>
      </div>
</form>
<button id = "showHide">Показать</button>
<script src = "65.js"></script>

JavaScript
1
2
3
4
5
6
7
8
9
document.getElementById('showHide').onclick = function (){
if (document.getElementsByClassName('content')[0].style.display == 'none'){
document.getElementsByClassName('content')[0].style.display = 'block';
document.getElementById('showHide').innerHTML = 'Скрыть';}
else{
document.getElementsByClassName('content')[0].style.display = 'none';
document.getElementById('showHide').innerHTML = 'Показать'; 
}
}

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	29.05.2018, 12:40
	shmdarya, и где же у Вас тут модальное окно? 0

@shmdarya 0 / 0 / 0 Регистрация: 31.10.2016 Сообщений: 74
	29.05.2018, 12:41 [ТС]
	atanov, `<form class="barcodeform">` эта форма и есть модальное окно 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	29.05.2018, 12:43
	shmdarya, это не модальное окно, это элемент DOM. Как он появляется? 0

@shmdarya 0 / 0 / 0 Регистрация: 31.10.2016 Сообщений: 74
	29.05.2018, 13:24 [ТС]
	atanov, сейчас оно скрыто. вызывается по кнопке, необходимо просто скрыть (сделать невидимым) по какому событию, к сожалению не скажу, т.к. не обладаю знаниями( 0