자바스크립트 닫기 버튼

PHPz
풀어 주다: 2024-04-16 10:54:15
원래의
1107명이 탐색했습니다.

JavaScript 닫기 버튼 적용 및 구현

웹 디자인에서는 사용자가 언제든지 창을 닫을 수 있도록 팝업 창이나 모달 상자에 닫기 버튼을 추가해야 하는 경우가 있습니다. 이 기사에서는 JavaScript를 사용하여 닫기 버튼 기능을 구현하는 방법을 소개합니다.

1. HTML 코드를 사용하여 닫기 버튼 만들기

HTML 코드에서

로그인 후 복사

其中,onclick属性会在按钮被点击时触发某个函数。我们需要在 JavaScript 中定义closeWindow()函数,以实现关闭窗口的功能。

二、使用 Window 对象关闭窗口

在 JavaScript 中,我们可以使用 Window 对象来关闭当前窗口或者打开的子窗口。以下是两个实现方式:

  1. 使用window.close()方法来关闭当前窗口:
function closeWindow() { window.close(); }
로그인 후 복사
로그인 후 복사

注意:window.close()方法只能关闭由 JavaScript 打开的窗口。如果当前窗口是用户打开的,则该方法将不起作用。

  1. 使用window.opener属性来关闭父窗口或者打开的子窗口:
function closeWindow() { window.opener=null; window.open('','_self'); window.close(); }
로그인 후 복사

在这个例子中,我们首先将window.opener设为null,以保证关闭的窗口不会再次自动打开其父窗口。接着我们使用window.open()方法来打开一个空白窗口,这个方法的第一个参数为要打开的 URL,由于我们不需要打开任何网址,所以传入了一个空字符串。第二个参数为窗口名称,这里使用了_self,表示在当前窗口中打开一个新网页。最后我们使用window.close()方法来关闭当前窗口。

三、在 jQuery 中实现关闭按钮

如果我们使用 jQuery 来编写 JavaScript 代码,可以使用以下两种方式来实现关闭按钮的功能:

  1. 使用window.close()方法来关闭当前窗口(同上):
function closeWindow() { window.close(); }
로그인 후 복사
로그인 후 복사
  1. 在 jQuery 中模拟窗口关闭事件:
function closeWindow() { var windowEvent = jQuery.Event('beforeunload'); $(window).trigger(windowEvent); if (!windowEvent.isDefaultPrevented()) { window.close(); } }
로그인 후 복사

在这个例子中,我们首先定义了一个模拟的窗口关闭事件。接着使用 jQuery 的trigger()方法来触发该事件,这将会执行所有已注册到该事件的处理程序。如果处理程序无阻止事件的默认行为,则会执行window.close()方法来关闭当前窗口。

总结:

本文介绍了在 JavaScript 和 jQuery 中如何实现关闭按钮。无论你是通过window.close()rrreee

Among onclick속성은 버튼을 클릭할 때 기능을 트리거합니다. 창을 닫는 기능을 구현하려면 JavaScript에서 closeWindow()함수를 정의해야 합니다. 2. Window 개체를 사용하여 창을 닫습니다JavaScript에서는 Window 개체를 사용하여 현재 창이나 열려 있는 하위 창을 닫을 수 있습니다. 다음은 두 가지 구현 방법입니다.
  1. 현재 창을 닫으려면window.close()메서드를 사용하세요.
rrreee참고: close()메소드는 JavaScript로 열린 창만 닫을 수 있습니다. 사용자가 현재 창을 연 경우 이 방법은 작동하지 않습니다.
  1. 상위 창이나 열려 있는 하위 창을 닫으려면window.opener속성을 사용하세요.
rrreee이 예에서는 먼저 window.openernull로 설정하여 닫힌 창이 자동으로 상위 창을 다시 열지 않도록 합니다. 그런 다음 window.open()메서드를 사용하여 빈 창을 엽니다. 이 메서드의 첫 번째 매개변수는 열려는 URL입니다. URL을 열 필요가 없으므로 null 문자는 다음과 같습니다. 문자열로 전달되었습니다. 두 번째 매개변수는 창 이름입니다. 여기서는 _self를 사용합니다. 이는 현재 창에서 새 웹페이지를 여는 것을 의미합니다. 마지막으로 window.close()메서드를 사용하여 현재 창을 닫습니다. 3. jQuery에서 닫기 버튼 구현jQuery를 사용하여 JavaScript 코드를 작성하는 경우 다음 두 가지 방법을 사용하여 닫기 버튼 기능을 구현할 수 있습니다.
  1. window.close( )현재 창을 닫는 방법(위와 동일):
rrreee
  1. jQuery에서 창 닫기 이벤트 시뮬레이션:
  2. rrreee 이 예에서는 먼저 시뮬레이션된 창 닫기 이벤트를 정의합니다. 그런 다음 jQuery의 trigger()메서드를 사용하여 이벤트를 트리거하면 해당 이벤트에 등록된 모든 핸들러가 실행됩니다. 핸들러에 이벤트를 차단하는 기본 동작이 없으면 window.close()메서드가 실행되어 현재 창을 닫습니다. 요약: 이 글에서는 JavaScript와 jQuery에서 닫기 버튼을 구현하는 방법을 소개합니다. window.close()메서드를 통해 창을 닫거나 창 닫기 이벤트를 시뮬레이션하는 경우 코드에서 닫기 동작을 명확하게 정의하고 이를 사용자에게 전달해야 합니다.

위 내용은 자바스크립트 닫기 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!