Javascript to be close to you

Using the window.close method

It may be needed that you need to give a close link in the popup you created. The window.close () method could be used to close a window. However, there are certain security restrictions for using the close() method.

The close method closes only windows opened by JavaScript using the open method. If you attempt to close any other window, a confirm message is displayed, asking the user to choose whether the window is to be closed or not. If you have the reference to a window, you can use the reference to the window to close.

 popup_window = window.open("");  .  popup_window.close (); 

You can close the current window using self.close (); For example:

 a href="self.close ()">Close this Windowa> 

Sample Code for window.close()

 html> head>  title>JavaScript Window Close Example title>  head> script type="text/javascript">  function popuponclick()    my_window = window.open("",  "mywindow","status=1,width=350,height=150");   my_window.document.write('
The Popup Window
');  >   function closepopup()    if(false == my_window.closed)    my_window.close ();  >  else    alert('Window already closed!');  >  >  script> body>  p>  a href="javascript: popuponclick()">Open Popup Windowa>  p>   p>  a href="javascript: closepopup()">Close the Popup Windowa>  p>  body>  html> 

See the code above in work in the Link below.

Click on the ‘Open Popup window’ link to open the popup first and then click on the ‘Close the Popup window’ link to close the popup.

See Also

Источник

How to Close a Modal Window when users Click Outside it, with vanilla JavaScript

Learn how to close a modal window, or any UI element, when the user clicks outside of it, with vanilla JavaScript.

Modal popups are generally annoying, especially when they take up your entire screen. It’s especially annoying when they occur within seconds of you entering the website. It’s stupid, and it’s bad UX design.

Some websites take it to the next level and decide to make the close modal (X) button so small and oddly positioned that you have just enough time to get really pissed while solving the puzzle that you might forget why you went to that website in the first place.

HTML: a simple modal window

Add the following code to your HTML document:

main> div class="modal"> button class="button-close-modal">Xbutton> h2>Subscribe to my Newsletterh2> p>Get access to exclusive content that only share with my email listp> label for="email">Enter your email:label> input type="email" id="email" name="email" /> div> main>

CSS: simple modal & button styling

.modal  padding: 2rem; border: 1px solid #eee; width: max-content; position: fixed; right: 0; bottom: 0; max-width: 100%; > .button-close-modal  display: block; font-size: 2rem; font-weight: bold; margin-left: auto; >

JavaScript: detect all clicks on document

The following JavaScript code will close the modal window if the user either clicks outside of the modal element, or if they click on the X button:

document.addEventListener( "click", function(event)  // If user either clicks X button OR clicks outside the modal window, then close modal by calling closeModal() if ( event.target.matches(".button-close-modal") || !event.target.closest(".modal") )  closeModal() > >, false ) function closeModal()  document.querySelector(".modal").style.display = "none" >

• First, we set up a click event listener on the document object. This means that any click, anywhere on the HTML document is registered, and now we can run functions for every click inside the curly braces < .. >.
• Then we set up two ways/targets for closing the modal window, either with a button click or with a click outside of the modal window.
• Inside the if statement we say “if the target either matches the button ( matches(«.button-close-modal») ) or ( || ) the target is not happening on the modal window !event.target.closest(«.modal») , then call the closeModal() function.
• When the closeModal() function is called, it selects the .modal class selector and hides it with display = ‘none’ .

The closest() method looks for the closest matching parent to an element that has a selector that you pass in, in this case, we pass in a class selector ( .modal ).

The matches() method checks if the event.target matches a specific selector, in this case, it’s the close button class selector .button-close-modal .

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Источник

How to Close a Browser Tab/Window with JavaScript

I was asked by a visitor how he could close a browser window or tab using JavaScript. This article addresses that question.

Prerequisite

Since this was written in response to a JavaScript question, it assumes that you at least know how to insert JavaScript code into a web page.

How to Close a Window with JavaScript

To close a window or tab that was opened using JavaScript, call window.close() . For example, the following will close the current window/tab.

Note that window.close() will only work under the following conditions:

1. On all modern browsers, the web page to be closed must be the first in that window/tab’s session history. That is, if you hit the Back button on the browser, you will not go to a previous page in that window/tab because there is none. You can easily accomplish that by opening that page either with JavaScript, for example, by using window.open() , or through a link that has a target=»_blank» attribute. You can find example code for the former in the demo below, and the latter in the article on opening links in a new window or tab. If you only test your code in an old browser (eg, old versions of Chrome or Firefox, or any version of Internet Explorer), you will end up with the mistaken impression that it works fine even if the above conditions are not true. Newer browser versions impose these restrictions for security (and other) reasons.
2. Modern browsers will also resist your attempt to trick them into thinking that an existing window/tab was opened with JavaScript when it was not. Some older versions fell for such trickery, but these methods should no longer work in the current versions of Chrome and Firefox.

Demo

Before you click the demo buttons below, please note the following:

• The «Open demo» button will open a window/tab containing this very article, although the browser should automatically scroll to start of the demo section, since I linked directly to it. (See How to Link to a Specific Line or Paragraph on a Web Page Using HTML, if you want to do this.)
• Although the «Close current window» button appears in both the original window/tab and the newly-opened demo, it may only work in the latter, depending on how you reached this article. If you are reading this in a modern browser, try it. That is, click the button in both the demo window (which should close) and this one (which may or may not). Having said that, you may not want to click the «Close current window» button on the original window in case you actually succeed, since you will then have to reload the page to continue reading.
• Once again, be warned that the window that pops up is identical to the one you are reading (since it’s the same URL), with no visual cue to distinguish between the original and the demo. As such, if you don’t look at the list of tabs/windows in your browser after clicking, you may not realize that you are already looking at the demo. If you repeatedly click the «Open demo» button, thinking that nothing has happened, you will end up with multiple windows/tabs containing this article. That said, the «Close current window» button should work on all the tabs/windows except possibly the original one. And, of course, the usual way you close a tab in your browser will also work.

Open demo in a new window/tab Close current window if possible

Source Code for the Demo

The HTML code for the buttons is as follows:

It is just the standard HTML code for buttons, with the addition of onclick handlers that are invoked when someone clicks them.

The JavaScript for tsw_open_demo_window() , which is called when the «Open demo» button is clicked, is:

I used a relative URL here, since I’m just opening this same page, but you can use an absolute one (ie, a complete address, including the «http://» or «https://» portion) if you wish.

Since the «Close current window» button does nothing but call window.close() , I placed the JavaScript directly in its onclick attribute.

Copyright © 2019-2021 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Copyright © 2019-2021 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 21 April 2021.

Источник

How to Close Browser Tab using JavaScript

You can use window.close() method to close the current browser tab/window in JavaScript. However, the method should be used with window.open() method. The «.close()» method will close a tab or window which is opened by JavaScript.

<script> let openCloseTab = () => < let win = window.open('https://www.encodedna.com/', '_blank'); win.close(); // Now, close the tab. > openCloseTab(); </script>

The .open() method opens the web page in a new tab, since I have used the «_blank» option. The page immediately closes, since the .close() method is called right after the «.open()» method.

This can be a one-liner code. For example,

const win = window.open('https://www.encodedna.com/', '_blank').close();

The above method opens and closes the new tab in a flash 💥. You can hardly see it happen. But, it worked.

There’s another method however.

<body> <p><input type='button' onclick='openNewTab()' value='Open New Tab'></p> <input type='button' onclick='closeTab()' value='Close the Tab'> </body> <script> let win; let openNewTab = () => < win = window.open('https://www.encodedna.com/', '_blank'); > let closeTab = () => < win.close(); > </script>

Now you can see what the code executes and how it executes. The first function opens a new tab and the second function closes the same tab. The variable win knows which window to close.

This Code works in Internet Explorer

Note: To make the above example work in «Internet Explorer’, use the below code instead (using regular JS functions). I ran this code in IE 10 and 11.

<body> <input type='button' onclick='openNewTab()' value='Open New Tab'> <br /> <input type='button' onclick='closeTab()' value='Close the Tab'> </body> <script> // This script will work in Internet Explorer. var win; function openNewTab() < win = window.open('https://www.encodedna.com/', '_blank'); > function closeTab() < win.close(); > </script>

Oh, why use buttons, when you can use a Timer to Close automatically

Here’s how you can do this.

<script> let win; let openNewTab = () => < win = window.open('https://www.encodedna.com/', '_blank'); > let closeTab = () => < win.close(); > setTimeout(closeTab, 2000); // Close the tab after 2000 miliseconds or 2 seconds. // For more on setTimeout() function read this article here… https://www.encodedna.com/javascript/redirect-page-after-a-delay-using-javascript.htm openNewTab(); </script>

There are so many ways you can close a browser tab using JavaScript. However, remember the tabs that you want the script to close, should have been opened by the script itself.

Источник