Home >Web Front-end >JS Tutorial >js pop-up menu/window effect_javascript skills
js pop-up menu/window effect_javascript skills
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-05-16 18:00:111188browse
Should there be better accessibility support for popup menus? This article will cover 3 common pop-up windows:
window.open New browser window
Created window
Page DOM Pseudo pop-up window created: Such as pop-up tips, etc.
1. When the page does not have JS
Generally speaking, if there is no JS, then do things according to the behavior of HTML. Make the link linkable and it's solved. It's relatively simple. We've briefly covered it:
1. window.open the new browser window: try to bind the JS trigger to and link a to a new page , that’s it.
Copy code The code is as follows:
// The link has the same goal as window.open
[open window]
// Remember to block the link by default, otherwise it will be opened twice when there is JS
window.open('./iframe.html', 'name', 'height=300,width=500');
return false;
2.
// js
document.getElementById('theframe').src = '/target.html'
3. Pseudo pop-up window created by page DOM: Use to hide. Links use anchors.
Copy code The code is as follows:
2. In most cases
In most cases, the user's browser has JS enabled. What we have to do is: focus on the pop-up window, and the first tab can access the content inside. It sounds quite simple, hub? Take a look at the DEMO first:
Preview: Accessible pop-up menu/window
1. window.open New browser window: Just focus on the newly created window.
Copy code The code is as follows:
// Quoted from: QuickMode - popups
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {
// focus to the new window
newwindow.focus();
}
// Default behavior of blocking triggers
return false;
}
2.