Как сделать кнопку закрытия окна в html
Добавил пользователь Евгений Кузнецов Обновлено: 05.10.2024
Общая кнопка закрытия для отклонения содержимого, такого как модальные окна и предупреждения.
Пример
Предоставьте возможность отклонить или закрыть компонент с помощью .btn-close . Стиль по умолчанию ограничен, но легко настраивается. Измените переменные Sass, чтобы заменить стандартное background-image . Не забудьте включить текст для программ чтения с экрана, как мы сделали с aria-label .
Отключенное состояние
Отключенные кнопки закрытия меняют свою opacity . Мы также применили pointer-events: none и user-select: none для предотвращения срабатывания состояния зависания и активного состояния.
Белый вариант
Измените значение по умолчанию .btn-close на белый с классом .btn-close-white . Этот класс использует свойство filter для инвертирования background-image .
Привет. Сегодня рассмотрим как сделать Крестик закрыть на чистом CSS, то есть нарисовать иконку закрытия/удаления без картинок.
Сразу напомню, что если вы не хотите разрабатывать сайт самостоятельно, то обратитесь к профессионалам: которые помогут вам разработать сайт быстро, качественно и без написание кода.
Ну, а для тех, кто все-таки хочет нарисовать иконку закрыть без картинок милости просим далее.
Крестик закрыть на чистом CSS
Для начала разберемся, что крестик должен быть описан в HTML коде. То есть это должен быть какой-то div или span. Так и сделаем:
Готово. Этот код нужно вставить в месте, где крестик должен выводится.
Теперь приступим к отрисовке самого крестика. Как понятно из заголовка статьи, делать это мы будем на чистом CSS, без использования картинок или иконочных шрифтов.
По умолчанию крестик будет полупрозрачным, при наведении – будет становится ярче. На ваше усмотрение, можно сделать альтернативный эффект при наведении.
Итак рассмотрим код на CSS:
Как видите, всё довольно прозаично. Для отрисовки крестика используется две прямые, одна из них выполнена псевдоэлементом :after, другая – :before. При этом один повернут на 45°, другой на -45°. Всё просто.
Что касается совместимости с браузерами, то это легко можно проверить с помощью caniuse, согласно ему :after, :before поддерживают все современные браузеры, transform – все, кроме Opera mini, что собственно говоря, является неплохим показателем.
При необходимости можно добавить разные примочки к этому крестику на ваше успотрение.
Я занимаюсь сайтами уже долгое время, и одной из своих слабых сторон до, так скажем, этой статьи я считал модальные окна. Я не приверженец готовых решений в виде громоздких модулей или плагинов, поэтому в большинстве случаев стараюсь писать и использовать свои наработки.
Долго я мучился, прописывая массу условий в CSS для различных экранов, пытаясь добиться адекватной адаптивности, и вот наконец вывел для себя формулу идеального (на мой взгляд) адаптивного и самое главное – простого модального окна, которым с удовольствием с вами сегодня поделюсь.
Наше модальное окно будет состоять из четырех элементов: верстки (HTML) самого окна и ссылки для его вызова, визуальной составляющей (CSS) и скрипта (jQuery), позволяющего нам вызывать и закрывать модальное окно по клику на нужный объект.
Перед тем как приступить, по традиции визуально покажу то, что в итоге у вас должно получиться:
Как вам? По-моему, более чем достаточно для того, чтобы на основе этого воплощать уже свои идеи.
Установка модального окна на сайт
Итак, что касается верстки модального окна, то она у нас выглядит следующим образом:
В окне я разместил кнопку закрытия, заголовок и его содержимое (собственно все, как на скриншоте). По необходимости, которая, скорее всего, у вас может возникнуть, текст (как и заголовок) вы можете заменить, например, на видео, форму обратной связи, изображение или любой другой нужный вам элемент вашего веб-проекта.
Кнопка (в моем случае ссылка) вызова модального окна:
Визуальная составляющая (CSS):
И, непосредственно, скрипт вызова и закрытия модального окна:
Два последних блока кода вы вставляете в соответствующие файлы вашего сайта. Не забывайте про подключение библиотеки jQuery, если она отсутствует на вашем сайте. На этом установка заканчивается.
На что здесь стоит обратить внимание?
На этом всё, чем я хотел с вами сегодня поделиться. Если какие-то моменты для вас показались сложными – пишите об этом в комментариях под данным постом.
Если закрываемое окно не было открыто при помощи window.open, то
при его закрытии выводится предупреждение. Посетитель может отклонить закрытие.
А как закрыть окно если открылось не через javascript ?
А также Но будет вопрос посетителю, хочет ли он закрыть окно.
function exit() var thisWindow = window.open("Listing3.html",'_self');
var exit = confirm("Хотите закрыть страницу?");
if(exit) thisWindow.close();
>
>
Как из родительского окна можно передать фокус окну, открытому следующей командой?
wid = window.open('1.htm','wname','width=300,height=300');
wname.focus()
wid.focus()
window.wid.focus()
window.wname.focus()
self.wid.focus()
помогите плиз.
а у меня не получается закрыть окно, которое открыто не скриптом.
window.close.php
js/window.js
Подскажите как закрыть страницу через javaScript
если вставить в страницу скрипт с window.close(); то ничего не происходит..
нежно что бы при открытии страницы она закрывалась скажем через 5 секунд.
Та же проблема. Не срабатывает window.close()
Для доступа к свойствам текущего окна используется self. Используйте self.close();
Почему-то window.close(), self.close(), this.close() работают только в Opera.
Если окно создано через фрейм на jquery. Много вопросов на форумах, как закрыть модальное окно из фрейма, обычно ответ один - никак. Но решение есть и оно аналогично плагину thickbox.
Просто навесить код на элемент находящийся внутри фрейма.
По работе стоит задача сделать кнопку закрытия окна браузера без вопроса "Действительно ли вы хотите закрыть. " Пробую сейчас для IE 8 - работает прекрасно. На IE 6 - нет. Где посмотреть какими версиями експлорера поддерживается эта функциональность и нет ли аналога для шестого?
Почему все так сложно?
Работать не возможно.
Почему нельзя все упростить?
Простые вещи через жопу делать надо. Невероятно. 21 век.
Дело в том, что все упирается в политику безопасности.
Если вы хотите сделать что-бы было просто, то будьте готовы, что у вас будут "самопроизвольно" (с помощью кода в баннере например) закрываться все вкладки.
Дело в том, что все упирается в политику безопасности.
Если вы хотите сделать что-бы было просто, то будьте готовы, что у вас будут "самопроизвольно" (с помощью кода в баннере например) закрываться все вкладки.
Всегда открывал окно примерно таким кодом:
function ShowWin(src, width, height) obj = window.open("", "", "scrollbars=0,dialog=0,minimizable=1,modal=1,width="+width+",height="+height+",resizable=0" ) ;
obj.document.write(" " ) ;
obj.document.write("" ) ;
obj.document.write(" " ) ;
>
Потребовалось закрытие окна, при клике вне него. Нашел в и-нете такой код:
function ShowWin(src, width, height) obj = window.open("", "", "scrollbars=0,dialog=0,minimizable=1,modal=1,width="+width+",height="+height+",resizable=0" ) ;
obj.document.write(" " ) ;
obj.document.write("" ) ;
obj.document.write(" " ) ;
this.onfocus=function()
>
Все работает, окно закрывается при клике "снаружи".
Не понимаю, почему ONFOCUS, а не ONBLUR?
Может, кто-нибудь пояснить? Помогите пожалуйста разобраться!
Окно закрывается при клике по родительскому окну. В вашем случае, вызов функции showWin происходит в "глобальном" контексте, и внутри функции this указывает на window. Соответственно в последней строчке вы задаете обработчик получения фокуса родительским окном, а внутри обработчика - закрываете дочернее окно (которое внутри обработчка представлено переменной obj)
это какая-то магия, но работает
вызванная без аргументов, функция закрывает текущее окно
function close_window(url) var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
>
ааааа. это же просто чит !
А может ко сможет мне помочь? Мне нужно, чтоб по нажатию "ОК" в диалоговом окне alert закрывалась браузерная вкладка
Как сделать так что бы при нажатии на ОК посетитель переходил на другую страницу, а если отмена закрывалась вкладка?
Если кто мучался с закрытием модольного окна, открытого через jquery, (Например:
highslide), то вот таблетка:
играю в браузерную игру
минимальную информацию обо мне в игре можно узнать просто нажав на мой профиль
где откроется отдельное окно
но и этого я бы не хотел
там можно загрузить свою картинку (с любого сайта), вписать домашнюю страницу, оставить свою почту
вот в этих вариантах есть возможность закрытия окна с моим профилем?
что бы просто автоматически закрывалась открывшись
например когда обращается за картинкой на какой то ресурс а оттуда сразу команда закрыть окно
javascript:close() в ссылку и не парься
Есть ли способ закрыть текущую страницу в последнем chrome.
var newWindow = window.open('', '_self', ''); //open the current window
window.close();
Этот способ не работает.
В консоль падает warning Scripts may close only the windows that were opened by it.
Ребят, помогите.
Есть окно, из которого я открываю другое окно
var w = window.open('test2.html', 'MyWindow');
во втором окне я делаю что надо, и жму кнопку закрыть
window.close();
как только эта страница закрывается через эту функцию, мне надо запустить скрипт на основной странице.
Как это отследить .
У меня работает только такой способ: self.close()
Доработал "читерский".
Пропишите следующего рода скрипт на закрываемую страницу.
И вызовите функцию DoCPExit();
Все успешно закрывается и без каких-либо подтверждений для пользователя.
Причем вызов функции можно настроить по времени истечения, например 5 секунд.
Читайте также: