How to Open a Custom-Sized Pop-Up Window with JavaScript?

Pop-Up a New Window with Custom Dimensions

In web development, sometimes it's desirable to open a new window for a specific purpose, such as sharing content on a social media platform. However, using target="_blank" might not provide the desired customization options regarding the new window's dimensions and behavior.

To control these aspects, JavaScript can be leveraged to achieve the desired outcome. Consider the following code snippet:

<code class="html"><a href="facebook.com/sharer" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">Share this</a></code>

This code achieves the following:

1. The target="_blank" attribute is removed to prevent opening a new tab.
2. An onclick handler is added to invoke JavaScript when the link is clicked.
3. window.open() function is called with specific parameters:
   a. this.href: The URL to share.
   b. 'mywin': The name of the new window.
   c. A series of comma-separated properties:
   i. left and top: Specifies the window's position on the screen in pixels.
   ii. width and height: Defines the window's dimensions in pixels.
   iii. toolbar=1: Specifies that the window should display a toolbar.
   iv. resizable=0: Prevents the user from resizing the window.

The above is the detailed content of How to Open a Custom-Sized Pop-Up Window with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!