Jump to content
  • 0

Нужны совет по написанию


lev99
 Share

Question

php или javascript

Идея такая, кнопка или картинка, при нажатии которой должжно всплывать окно(700 на 500) или просто открытие новой вкладки с html кодом.

И всё это в php одним файлом и одним кодом без использования css и AJAX, html5..

Помоггите советом, каким образом, можно сделать?

Edited by lev99
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Можно использовать javascript для вызова всплывающего окна.


<script>
function new_window()
{
window.open('/print.php','newwin','top=15, left=20, menubar=0, toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, width=500, height=700');
}
</script>


<a href="/print.php" target="_blank" onclick="new_window(); return false;">Новое окно</a>

http://vvz.nw.ru/Lessons/JavaScript/Objects/window/window_open.htm (форум ломает ссылку, по этому пришлось так её оформить)

Но если вы скажите для чего вам новое окно, возможно мы сможем найти более "гуманный" способ решения.

Edited by deadrash
Link to comment
Share on other sites

  • 0

возможно для того что бы из нового окна отправить на печать эту квитанцию...!

Ну для этого точно есть более гуманный способ. А именно - использования отдельных стилей для печати.

Для этого, необходимо подключить в хедере стили с параметром meadia="print"


<link rel="stylesheet" media="print" href="/styles/print.css" />

На странице сделать кнопку печати:


<p onclick="window.print();">Распечатать квитанцию</p>

И затем, просто написать в стилях /styles/print.css что и как отображать. Естественно что сама таблица, которую требуется распечатать, должна находиться на той-же странице. Но отображать её можно только в стилях /styles/print.css

Вот для примера можно посмотреть тут http://neva-cleaning.ru/price.html Нужно навести мышь на шапку, и появится кнопка "Распечатать страницу".

В хроме выглядит особенно эффектно.

Edited by deadrash
Link to comment
Share on other sites

  • 0

Не совсем так, у меня маленький модуль приёма платежей и эта квитанция, как дополнение.

Не каких доп. файлов всё одним скриптом то есть если нажимается кнопка выполняется выполняется действие по отображению кода квитанции.

Не могу решить, чтобы прикрутить, что-то компактное типа кнопки или картинки.

Edited by lev99
Link to comment
Share on other sites

  • 0

в общем смысле, да, только хотелось бы чтобы квитанция отображалась не там где кнопка, а в новой вкладке. или открывалось вкладка без меню и 700 на 800.

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

Хотя я может туплю можно вписать значение которое отобразиться в квитанции?

Link to comment
Share on other sites

  • 0

в общем смысле, да, только хотелось бы чтобы квитанция отображалась не там где кнопка, а в новой вкладке. или открывалось вкладка без меню и 700 на 800.

Как это сделать я в первом сообщении ответил.

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

Хотя я может туплю можно вписать значение которое отобразиться в квитанции?

Ну да, можно саму квитанцию обернуть в form, а некоторые поля, те что нужно менять - сделать через input

Edited by deadrash
Link to comment
Share on other sites

  • 0

да точно form и input


<script>
function new_window()
{
window.open('/print.php','newwin','top=15, left=20, menubar=0, toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, width=500, height=700');
}
</script>

<a href="/print.php" target="_blank" onclick="new_window(); return false;">Новое окно</a>

Кстати как обойтись без создания лишнего файла /print.php

Кстати насчёт распечатки в этом случите надо делать кнопку распечатать?

Link to comment
Share on other sites

  • 0

Кстати как обойтись без создания лишнего файла /print.php

Можно вызывать туже страницу где и находитесь, только с параметрами, которые будут обозначать отображение таблицы. Сделать можно двумя способами

1. Отображение на сервере:

Для этого в том же файле на php сделайте условие которое будет отображать таблицу если в запросе к странице передан необходимый параметр. И потом, когда вызываете эту страницу то дописываете к ней нужный параметр, на подобии: /page.php?show_table=1

2. Отображение на клиенте: практически тоже самое, только отображение происходит с помощью javascript уже на клиенте.

Но лучше всё таки не использовать новое окно.

Кстати насчёт распечатки в этом случите надо делать кнопку распечатать?

Печатать можно и по горячей клавише ctrl+p и через меню браузера.

Кнопка только для удобства.

Link to comment
Share on other sites

  • 0

Частично получилось только код не могу вставить


$mystuff = <<<EOF
<p>This is 'myWindow'</p>
EOF;

в это:


<script type="text/javascript">
function new_window()
{
myWindow=window.open('','newwin','top=15, left=20, menubar=0, toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, width=800, height=700')
mywindow.document.write("<?php echo $mystuff; ?>")
mywindow.focus()
}
</script>
<input type="button" value="Open Window" onclick="new_window()">

Пока остановился на


<script type="text/javascript">
function new_window()
{
window.open("/print.php","_blank","top=15, left=20, menubar=no, toolbar=no, location=no, directories=no, status=no, scrollbars=no, resizable=no, width=500, height=700");
}
</script>
<input type="button" value="Open Window" onclick=""new_window()">

http://www.w3schools...et_win_open.asp

Edited by lev99
Link to comment
Share on other sites

  • 0

Как сделать чтобы само отправлялось на печать а если отказывались то закрывалось как здесь:

http://www.sbform.ru/print.php

Или такой вариант, но думаю этот вариант по сложней будет:

http://quittance.ru/pd4.php

Link to comment
Share on other sites

  • 0

Как сделать чтобы само отправлялось на печать а если отказывались то закрывалось как здесь:

http://www.sbform.ru/print.php

Или такой вариант, но думаю этот вариант по сложней будет:

http://quittance.ru/pd4.php

1.


...
<script>
function print1()
{if (confirm ('Проверьте еще раз правильность введенных Вами платежных данных.\n- Если обнаружена ошибка, то нажмите "Отмена" и отредактируйте форму.\n- Если все нормально, нажмите "ОК" - бланк будет отправлен на печать. '))
window.print()
else
/*history.go(-1)*/
window.close()
}
</script>
</head>
...
<!--и инициализация в конче страницы-->
<script>
print1();
</script>
</body>
...

2.


<input type="button" onclick="window.print();" value="Напечатать">

PS Короче просто откройте исходный код страницы и посмотрите

Edited by wwt
Link to comment
Share on other sites

  • 0

Спасибо, всё получилось, правда не подходит, я не смог добиться, чтобы настройки переходили в другой файл.

остановился на этом варианте:


<script type="text/javascript">
function new_window()
{
myWindow=window.open('','newwin','top=15, left=20, menubar=0, toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, width=800, height=700')
mywindow.document.write("<?php echo $mystuff; ?>")
mywindow.focus()
}
</script>
<input type="button" value="Open Window" onclick="new_window()">

Но в нём css живёт, а всплывающее окно с кнопками нет )))

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Марко
      Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 



    • By Kaido
      Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
       
        <div class="content"> <button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button> </div> <div class="modal"> <div class="modal__wrapp" data-target="first"> <div class="modal__content"> <button class="modal__close">Закрыть</button> модальное окно <button data-path="policy">Политика</button> </div> </div> <div class="modal__wrapp" data-target="policy"> <div class="modal__content"> <button class="modal__close">Закрыть</button> политика </div> </div> </div> .modal { --transition-time: 0.3s; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; cursor: pointer; overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp { display: none; cursor: default; width: fit-content; height: fit-content; } .modal__content{ position: absolute; left: 500px; width: 500px; height: 500px; display: flex; color: white; flex-direction: column; text-align: left; background-color: #000; } .modal__content button{ width: 200px; height: 50px; margin: 50px 0; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp.modal-open { display: flex; } .disable-scroll { position: relative; overflow: hidden; height: 100vh; position: fixed; left: 0; top: 0; width: 100%; } .fade { opacity: 0; transition: opacity var(--transition-time); } .fade.animate-open { opacity: 1; transition: opacity var(--transition-time); } .fadeInUp { opacity: 0; transform: translateY(vw(-100)); transition: opacity var(--transition-time), transform var(--transition-time); } .fadeInUp.animate-open { opacity: 1; transform: translateY(0); transition: opacity var(--transition-time), transform var(--transition-time); } .modal__wrapp[data-target="policy"] .modal__content{ left: 1050px; background-color: #000; opacity: .5; } class Modal { constructor(options) { let defaultOptions = { isOpen: () => {}, isClose: () => {}, } this.options = Object.assign(defaultOptions, options); this.modal = document.querySelector('.modal'); this.speed = false; this.animation = false; this.isOpen = false; this.modalContainer = false; this.previousActiveElement = false; this.fixBlocks = document.querySelectorAll('.fix-block'); this.focusElements = [ 'a[href]', 'input', 'button', 'select', 'textarea', '[tabindex]' ]; this.events(); } events() { if (this.modal) { document.addEventListener('click', function(e){ const clickedElement = e.target.closest('[data-path]'); if (clickedElement) { let target = clickedElement.dataset.path; let animation = clickedElement.dataset.animation; if (clickedElement.classList.contains('modal-close')) { this.close(); } let speed = clickedElement.dataset.speed; this.animation = animation ? animation : 'fade'; this.speed = speed ? parseInt(speed) : 300; this.modalContainer = document.querySelector(`[data-target="${target}"]`); this.open(); return; } if (e.target.closest('.modal__close')) { this.close(); return; } }.bind(this)); window.addEventListener('keydown', function(e) { if (e.keyCode == 27) { if (this.isOpen) { this.close(); } } if (e.keyCode == 9 && this.isOpen) { this.focusCatch(e); return; } }.bind(this)); this.modal.addEventListener('click', function(e) { if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) { this.close(); } }.bind(this)); } } open() { this.previousActiveElement = document.activeElement; this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`); this.modal.classList.add('is-open'); this.disableScroll(); this.modalContainer.classList.add('modal-open'); this.modalContainer.classList.add(this.animation); setTimeout(() => { this.options.isOpen(this); this.modalContainer.classList.add('animate-open'); this.isOpen = true; this.focusTrap(); }, this.speed); } close() { if (this.modalContainer) { this.modalContainer.classList.remove('animate-open'); this.modalContainer.classList.remove(this.animation); this.modal.classList.remove('is-open'); this.modalContainer.classList.remove('modal-open'); this.enableScroll(); this.options.isClose(this); this.isOpen = false; this.focusTrap(); } } focusCatch(e) { const focusable = this.modalContainer.querySelectorAll(this.focusElements); const focusArray = Array.prototype.slice.call(focusable); const focusedIndex = focusArray.indexOf(document.activeElement); if (e.shiftKey && focusedIndex === 0) { focusArray[focusArray.length - 1].focus(); e.preventDefault(); } if (!e.shiftKey && focusedIndex === focusArray.length - 1) { focusArray[0].focus(); e.preventDefault(); } } focusTrap() { const focusable = this.modalContainer.querySelectorAll(this.focusElements); if (this.isOpen) { focusable[0].focus(); } else { this.previousActiveElement.focus(); } } disableScroll() { let pagePosition = window.scrollY; this.lockPadding(); document.body.classList.add('disable-scroll'); document.body.dataset.position = pagePosition; document.body.style.top = -pagePosition + 'px'; } enableScroll() { let pagePosition = parseInt(document.body.dataset.position, 10); this.unlockPadding(); document.body.style.top = 'auto'; document.body.classList.remove('disable-scroll'); window.scroll({ top: pagePosition, left: 0 }); document.body.removeAttribute('data-position'); } lockPadding() { let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px'; this.fixBlocks.forEach((el) => { el.style.paddingRight = paddingOffset; }); document.body.style.paddingRight = paddingOffset; } unlockPadding() { this.fixBlocks.forEach((el) => { el.style.paddingRight = '0px'; }); document.body.style.paddingRight = '0px'; } } const modal = new Modal({ isOpen: (modal) => { console.log(modal); console.log('opened'); }, isClose: () => { console.log('closed'); }, });  
    • By stasN1
      Мне нужен такой результат :

      Не понимаю почему background не применяется вокруг иконок:

       
      Сам код:
      Html:
      css:

      Html:
      <section class="finish"> <div class="container"> <h2 class="finish_header">По окончании обучения Вы сможете!</h2> <div class="finish_divider"></div> <div class="finish_wrapper"> <finish_item> <div class="finish_round"> <img src="/icons/finish/1 (1).png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/2.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/3.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/4.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/5.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> </div> </div> </section>  
      Css:
      .finish .finish_wrapper { margin-top: 41px; display: flex; justify-content: space-between; } .finish .finish_wrapper .finish_item { width: 204px; } .finish .finish_wrapper .finish_item .finish_round { width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; } .finish_descr { font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо!
       

      Уже решил, спасибо!
      У меня CSS селектор вида:
      .finish .finish_wrapper .finish_item .finish_round

      А должен быть:
      .finish .finish_wrapper finish_item .finish_round
      Т.е. без точки перед finish_item, так как это не класс, а элемент
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy