如何从上下文菜单中显示模式弹出窗口？ [英] How to show a modal popup from the context menu?

问题描述

如何从上下文菜单显示模式对话框？

我可以从上下文菜单中显示一个新窗口，该窗口在其自己的选项卡中打开：

  var menuItem = {
id：rateMenu，
title：Rate Item，
contexts：[all]，
} 
 
 chrome.contextMenus.create（menuItem）; 
 
 chrome.contextMenus.onClicked.addListener（function（clickData）{
 open（'index.html'）; 
}）; 
  

我也知道如何在页面上使用引导（例如）来显示模态对话框：

  $（'＃myModal'）。modal（{
背景：'static'，
键盘：false 
））
  

在这种特殊情况下，我想显示一个模态对话框除非您按下关闭按钮，否则无法关闭。

然而，我不知道如何直接从上下文菜单中显示模式弹出窗口。

有没有人知道如何实现这一点？

谢谢！

解决方案

我也这样做了。只需使用内容脚本即可显示 modal 。

示例：当用户单击上下文菜单项时，发送消息到内容脚本让它知道它，以便它应该打开一个模式。

background.js ：

  chrome.contextMenus.onClicked.addListener（function（clickData））{
 chrome.tabs.query（{active：true，currentWindow：true}，function（tabs）{
 chrome.tabs.sendMessage（tabs [0] .id，{type：openModal}）; 
}）; 
}）; 
  

contentscript.js ：

  chrome.runtime.onMessage.addListener（function（request，sender，sendResponse）{
 switch（request.type）{
 caseopenModal ：
 $（'＃myModal'）。modal（{
背景：'static'，
键盘：false 
}）; 
 break; 
 }）; 
  

确保在 content_scripts manifest.json

 content_scripts：[
 {
matches：[https：// * / *]，
css：[bootstrap.min.css]，
js： [jquery.min.js，bootstrap.min.js，contentscript.js]，
run_at：document_end
} 
] 
  

注意：使用 bootstrap.min.css 可能与页面UI发生冲突，并可能改变它。为了避免这种情况，请将您的模式和所需的js和css文件移动到单独的html文件（ modal.html ）中。然后使用内容脚本将 iframe 注入到标签中。

  var iframe = document.createElement（'iframe'）; 
 iframe.src = chrome.extension.getURL（modal.html）; 
 iframe.frameBorder = 0; 
 iframe.id =myFrame; 
 $（iframe）.hide（）; //必要的框架将是可见的
 $（iframe）.appendTo（body）; 
  

记住来添加 modal.html code>以及在 modal.html 中使用的所有css和js文件，例如 modal.js ， bootstrap.min.js ， bootstrap.min.css 在 web_accessible_resources ：

  web_accessible_resources：[modal.html，modal.js，bootstrap.min.js ，bootstrap.min.css] 
  

现在您可以隐藏或显示 iframe 使用内容脚本，但是显示和隐藏模式，它可以从 iframe 中完成，因此您需要传递消息 background to iframe 来显示模式。上面为contentscript提到的代码适用于 iframe 也是。

如果您想隐藏iframe，只需发送 iframe to contentscipt 使用 window.parent.postMessage（）。

示例：

modal.js ：

  window.parent.postMessage （{type：hideFrame}，*）; 
  

contentscript.js ：

  window.addEventListener（message，function（event）{
 if（event.data.type ==hideFrame）{
 $ （#myFrame）。hide（）; 
} 
}）; 
  

How can I display a modal dialog from the context menu?

I can show a new window from context menu which opens in its own tab:

var menuItem = {
    "id": "rateMenu",
    "title": "Rate Item",
    "contexts": ["all"],
}

chrome.contextMenus.create(menuItem);

chrome.contextMenus.onClicked.addListener(function (clickData) {
    open('index.html');
});

I also know how to show a modal dialog, using bootstrap (for example) on the page itself:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

In this particular case I want to show a modal dialog that you cannot close unless you press the "close" button.

However, I have no idea how to show the modal popup window straight away from the context menu.

Does anyone have any idea how this can be achieved?

Thank you!

解决方案

I have done the same. Just use content script to show modal.

Example : When user clicks the context menu item, send message to content script to let it know about it so that it should open a modal.

background.js:

chrome.contextMenus.onClicked.addListener(function (clickData) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
   chrome.tabs.sendMessage(tabs[0].id, {type: "openModal"});
  });
});

contentscript.js:

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
            switch (request.type){
                case "openModal":
                    $('#myModal').modal({
                       backdrop: 'static',
                       keyboard: false
                    });
                    break;  
});

Make sure to include necessary css and js files under content_scripts in manifest.json

"content_scripts": [
    {
      "matches": ["https://*/*"],
      "css":["bootstrap.min.css"],
      "js":["jquery.min.js","bootstrap.min.js","contentscript.js"],
      "run_at":"document_end"
    }
  ]

NOTE : Using bootstrap.min.css may conflict with the page UI and it may change it. To avoid this, move your modal and the required js and css files in a separate html file(modal.html). Then inject your iframe into the tab using content script.

var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("modal.html");
iframe.frameBorder = 0;
iframe.id = "myFrame";
$(iframe).hide();//necessary otherwise frame will be visible
$(iframe).appendTo("body");

Remember to add modal.html and all the css and js files that are used inside modal.html like modal.js,bootstrap.min.js,bootstrap.min.css under web_accessible_resources:

web_accessible_resources": ["modal.html","modal.js","bootstrap.min.js","bootstrap.min.css"]

Now you can hide or show your iframe using content script but to show and hide modal, it can be done from inside iframe only. So you would need to pass a message from background to iframe to show the modal.The code above mentioned for contentscript will work for iframe also.

In case you want to hide the iframe, just send message from iframe to contentscipt using window.parent.postMessage().

Example:

modal.js:

 window.parent.postMessage({ type: "hideFrame" }, "*");

contentscript.js:

    window.addEventListener("message", function(event) {
         if (event.data.type == "hideFrame") {
              $("#myFrame").hide();
          }
});

这篇关于如何从上下文菜单中显示模式弹出窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！