JavaScript pop-up menu/window implementation code

Source: Internet
Author: User

window.open The new browser window
Windows created by <iframe/>
Pseudo pop-up windows created by the page DOM: such as pop-up tips

First, when the page without JS
Generally speaking, no JS situation that is based on the behavior of HTML to do things. So that links can be linked, it has been resolved. Relatively simple, we have simply brought:

1. window.open new browser window: Try to get JS triggers bound on <a/> and link A to a new page.

The link is the same as the window.open target

The code is as follows Copy Code
<a href= "/target.html" target= "_blank" >[open window]</a>

Remember to block the default behavior of the link, or JS will open two times

The code is as follows Copy Code
window.open ('./iframe.html ', ' name ', ' height=300,width=500 ');
return false;

2. <iframe/> Created window: If it is created dynamically with JS, then remember the trigger should also be like window.open method, write the solution link on a <a/>, let the user through the link to access. And if it is hidden, then try to use <noscript/> to hide, and then use JS to make it normal display, or a height of 0 empty iframe. This will ensure that when there is JS available, and in the absence of JS can be normal display. Detailed application can refer to: Alipay new home of a few front-end practice.

Create dynamically, use this method as much as possible, because IE8 cannot use JS focus to dynamically created focusable elements
and empty src use javascript: ' This way, because this is the best way to solve performance, see: Empty Path to page performance impact solution

The code is as follows Copy Code

<a href= "/target.html" target= "_blank" >[open iframe]</a>
<iframe src= "javascript:" "frameborder=0 id=" Theframe "></iframe>

Js
document.getElementById (' theframe '). src = '/target.html '

3. The pseudo pop-up window created by the page DOM: Hidden using <noscript/>. Link with anchor point.

The code is as follows Copy Code
<a href= "#target" >[open current page dom]</a>

... A lot of things are separated in the middle ...

The code is as follows Copy Code
<noscript><div id= "Target" >content</div></noscript>

Second, most of the cases
Large number of cases, the user's browser is open JS. And we have to do is: focus to the pop-up window, and the first tab will be able to access the contents of the. Sounds pretty simple, hub? First look at the DEMO:

Previewing: Access to pop-up menus/windows

1. window.open new browser window: Focus to a new window.

The code is as follows Copy Code
Referenced from: quickmode-popups
function Popitup (URL) {
Newwindow=window.open (URL, ' name ', ' height=200,width=150 ');
if (Window.focus) {
Focus to new Window
Newwindow.focus ();
}
To block the default behavior of triggers
return false;
}

2. <iframe/> Created window: Debugging for a long time, IE8/9 need such as IFRAME after the success settimeout to Hack;firefox can not use Ifrcontentwindow.focus (), can only use if Rame.focus (). Combined, this code is needed:

The code is as follows Copy Code

For all except Firefox
settimeout (function () {
F.contentwindow.focus ();
}, 50);

Hack for Firefox
Navigator.userAgent.toLowerCase (). IndexOf (' Firefox ')!==-1 && f.focus ();

3. Pseudo-pop-up windows created by the page DOM: for DOM, these focusable elements (the <a/> <input/>) are not focus-only. So what can we do when we need to focus to a div? In general, we can set Tabindex to allow non focusable elements such as <div/> to trigger the focus event. But we want to really focus to a place, so that we can use the tab to access the content of the area, so this method is useless for us.

There is no better method (for what I can think of and find), so for now, we can only use a focusable element to create the focus target. We can do this:

<a href= "#" class= "GetFocus" >get focus</a>
<input title= "Testing"/>
But the problem is that the link has no effect on us, we need to hide him and focus. But Display:none is not the focus of the time. For hidden, there is not much to say. Recommend a look at this article: use Clip to hide content. So we can do this to hack our link:

The code is as follows Copy Code

HTML: Note Use Hidefocus to remove dotted boxes
<a href= "#" class= "GetFocus" Hidefocus>get focus</a>

CSS: Using clip
. getfocus{
position:relative;
Clip:rect (1px 1px 1px 1px);
Clip:rect (1px, 1px, 1px, 1px);
}

JavaScript: Remember to put <a/> at the front of this DOM structure for easy access from top to bottom tab
A.focus ()
Third, Summary:
So far, important technical implementation points have also been made clear. Code see this rude DEMO, although there is no special optimization of a piece of code, but I believe that can solve a lot of problems. For accessibility, we have a lot of ways to go. Come a little bit, starting today.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.