要保持Chrome扩展的模态风格,你可以使用Chrome扩展的chrome.windows.create
方法来创建一个模态窗口。下面是一个示例代码:
manifest.json:
{
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html"
}
}
popup.html:
My Extension
popup.js:
document.getElementById('openModal').addEventListener('click', function() {
chrome.windows.create({
type: 'popup',
url: 'modal.html',
width: 400,
height: 300
});
});
modal.html:
Modal
Modal Window
modal.js:
document.getElementById('closeModal').addEventListener('click', function() {
window.close();
});
这个示例代码会在点击"Open Modal"按钮时,在一个模态窗口中打开"modal.html"页面。模态窗口中有一个"h1"标题和一个"Close Modal"按钮。当点击"Close Modal"按钮时,模态窗口会关闭。