html

Close Button

The humble close button can be used anywhere you need something to go away on click.

A close button is a element with the class .close-button . We use the multiplication symbol ( × ) as the X icon. This icon is wrapped in a with the attribute aria-hidden=»true» , so screen readers don’t read the X icon.

The button is also labeled with aria-label to clarify what the button’s purpose is.

div class="callout" data-closable> button class="close-button" aria-label="Close alert" type="button" data-close> span aria-hidden="true">× span> button> p>Look at this close button! p> div>

Look at this close button!

Making Closable

The close button on its own doesn’t close elements, but you can use it with Toggler, Reveal, Off-canvas, and other plugins that have open and close behaviors.

Any element can be used as a close trigger, not just close button. Adding the attribute data-close to any element within the callout will turn it into a close trigger.

The below example pairs the callout with the close button component and data-closable attribute to create a dismissible alert box.

div class="callout" data-closable> p>You can so totally close this! p> button class="close-button" aria-label="Dismiss alert" type="button" data-close> span aria-hidden="true">× span> button> div> div class="success callout" data-closable="slide-out-right"> p>You can close me too, and I close using a Motion UI animation. p> button class="close-button" aria-label="Dismiss alert" type="button" data-close> span aria-hidden="true">× span> button> div>

You can so totally close this!

You can close me too, and I close using a Motion UI animation.

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project’s settings file.

Default position of the close button. The first value should be right or left , and the second value should be top or bottom .

Default z-index for a close button.

Button size to use as default

Right (or left) offset(s) for a close button.

Top (or bottom) offset(s) for a close button.

Size(s) of the close button. Used to generate sizing modifiers.

The line-height of the close button. It affects the spacing of the element.

Default color of the close button.

Default color of the close button when being hovered on.

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

close-button-size

@include close-button-size($size);

Sets the size and position of a close button.

The size to use. Set to small to create a small close button. The ‘medium’ values defined in $closebutton-* variables will be used as the default size and position of the close button.

close-button

Adds styles for a close button, using the styles in the settings variables.

Building Blocks

Building Blocks is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:

These are placeholder items. If you have ideas for building blocks for this component, we’re taking ideas on GitHub.

Источник

Русские Блоги

Несколько способов закрыть и отменить страницу, нажав кнопку на странице HTML.

1. Код js для закрытия окна без запроса

2. Отключите пользовательские подсказки.

3. Когда вы собираетесь покинуть текущую страницу (обновите или закройте)

Перейти к учебнику для новичков
Когда пользователь нажимает кнопку закрытия в развернутой свернутой кнопке закрытия браузера
Событие onbeforeunload запускается, когда текущая страница собирается покинуть (обновить или закрыть). к
Это событие можно использовать для открытия диалогового окна, предлагающего пользователю продолжить просмотр страницы или покинуть текущую страницу. к
Приглашение диалогового окна по умолчанию зависит от браузера. Стандартное сообщение похоже на «Вы действительно хотите покинуть эту страницу?». Эта информация не может быть удалена. к
Но вы можете настроить некоторые сообщения, которые будут отображаться в диалоговом окне вместе со стандартными сообщениями. к
Примечание. Если вы не укажете событие onbeforeunload для элемента, вам необходимо добавить событие в объект окна и использовать свойство returnValue для создания настраиваемой информации (см. пример синтаксиса ниже). к
Примечание. В браузере Firefox отображается только информация напоминания по умолчанию (настраиваемая информация не отображается). к
Вы можете изменить dom.allow_scripts_to_close_windows на true в about: config.

В HTML:

        
В этом примере показано, как добавить событие onbeforeunload к элементу body. 
Закройте текущее окно, нажмите F5 или щелкните ссылку ниже, чтобы вызвать событие onbeforeunload. Нажмите, чтобы перейти к руководству для новичков function myFunction() 

В JavaScript:

        
В этом примере показано, как добавить событие onbeforeunload к элементу body. 
Закройте текущее окно, нажмите F5 или щелкните следующую ссылку, чтобы вызвать событие onbeforeunload. Нажмите, чтобы перейти к руководству для новичков function myFunction() 

В JavaScript используйте метод addEventListener ():

        
В этом примере показано, как использовать метод addEventListener () для добавления события onbeforeunload к элементу body. 
Закройте текущее окно, нажмите F5 или щелкните следующую ссылку, чтобы вызвать событие onbeforeunload. Нажмите, чтобы перейти к руководству для новичков   

4、onload,onunload,onbeforeunload

Событие window.onload устанавливает действие, выполняемое при загрузке страницы, то есть действие, выполняемое при входе на страницу. к
window.onunload прочитал новую страницу, которую необходимо загрузить с сервера, он вызывается, когда текущая страница собирается быть заменена
обычно используется для установки действия, которое будет выполнено после выхода со страницы. к
window.onbeforeunload вызывается, когда он собирается перейти на сервер, чтобы прочитать новую страницу, и он еще не начал чтение в это время. Проще говоря, это происходит перед тем, как покинуть страницу. Обычно он используется как напоминание, чтобы спросить вас, Не покидать эту страницу. к
onunload и onbeforeunload — это действия перед обновлением и закрытием страницы, но onbeforeunload предшествует onunload, и Onunload не может предотвратить обновление и закрытие страницы, в то время как Onbeforeunload может это сделать.

например:

   function hello() < alert("hello world"); >function ha() < alert("bye"); >function go() 
hello world
 heloo  

Используйте js onload для обработки событий после загрузки html-страницы

5. Удалить или (выгрузить) событие window.onbeforeunload

     window.onbeforeunload = onbeforeunload_handler; function onbeforeunload_handler() < var warning = "Внимание, подтверждение завершения работы приведет к сбою системы"; return warning; >function removefun()  
Нажмите "Я убираю всплывающее окно подтверждения"
   

Источник

Русские Блоги

Несколько способов закрыть и отменить страницу, нажав кнопку на странице HTML.

1. Код js для закрытия окна без запроса

2. Отключите пользовательские подсказки.

3. Когда вы собираетесь покинуть текущую страницу (обновите или закройте)

Перейти к учебнику для новичков
Когда пользователь нажимает кнопку закрытия в развернутой свернутой кнопке закрытия браузера
Событие onbeforeunload запускается, когда текущая страница собирается покинуть (обновить или закрыть). к
Это событие можно использовать для открытия диалогового окна, предлагающего пользователю продолжить просмотр страницы или покинуть текущую страницу. к
Приглашение диалогового окна по умолчанию зависит от браузера. Стандартное сообщение похоже на «Вы действительно хотите покинуть эту страницу?». Эта информация не может быть удалена. к
Но вы можете настроить некоторые сообщения, которые будут отображаться в диалоговом окне вместе со стандартными сообщениями. к
Примечание. Если вы не укажете событие onbeforeunload для элемента, вам необходимо добавить событие в объект окна и использовать свойство returnValue для создания настраиваемой информации (см. пример синтаксиса ниже). к
Примечание. В браузере Firefox отображается только информация напоминания по умолчанию (настраиваемая информация не отображается). к
Вы можете изменить dom.allow_scripts_to_close_windows на true в about: config.

В HTML:

        
В этом примере показано, как добавить событие onbeforeunload к элементу body. 
Закройте текущее окно, нажмите F5 или щелкните ссылку ниже, чтобы вызвать событие onbeforeunload. Нажмите, чтобы перейти к руководству для новичков function myFunction() 

В JavaScript:

        
В этом примере показано, как добавить событие onbeforeunload к элементу body. 
Закройте текущее окно, нажмите F5 или щелкните следующую ссылку, чтобы вызвать событие onbeforeunload. Нажмите, чтобы перейти к руководству для новичков function myFunction() 

В JavaScript используйте метод addEventListener ():

        
В этом примере показано, как использовать метод addEventListener () для добавления события onbeforeunload к элементу body. 
Закройте текущее окно, нажмите F5 или щелкните следующую ссылку, чтобы вызвать событие onbeforeunload. Нажмите, чтобы перейти к руководству для новичков   

4、onload,onunload,onbeforeunload

Событие window.onload устанавливает действие, выполняемое при загрузке страницы, то есть действие, выполняемое при входе на страницу. к
window.onunload прочитал новую страницу, которую необходимо загрузить с сервера, он вызывается, когда текущая страница собирается быть заменена
обычно используется для установки действия, которое будет выполнено после выхода со страницы. к
window.onbeforeunload вызывается, когда он собирается перейти на сервер, чтобы прочитать новую страницу, и он еще не начал чтение в это время. Проще говоря, это происходит перед тем, как покинуть страницу. Обычно он используется как напоминание, чтобы спросить вас, Не покидать эту страницу. к
onunload и onbeforeunload — это действия перед обновлением и закрытием страницы, но onbeforeunload предшествует onunload, и Onunload не может предотвратить обновление и закрытие страницы, в то время как Onbeforeunload может это сделать.

например:

   function hello() < alert("hello world"); >function ha() < alert("bye"); >function go() 
hello world
 heloo  

Используйте js onload для обработки событий после загрузки html-страницы

5. Удалить или (выгрузить) событие window.onbeforeunload

     window.onbeforeunload = onbeforeunload_handler; function onbeforeunload_handler() < var warning = "Внимание, подтверждение завершения работы приведет к сбою системы"; return warning; >function removefun()  
Нажмите "Я убираю всплывающее окно подтверждения"
   

Источник