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();
}
});
Related
I am using primefaces documentViewer which is based on mozilla PDF.js: 2.11.338
https://www.primefaces.org/showcase-ext/views/documentViewer.jsf
and I want to customize the viewer to control which buttons to appear in the toolbar like rotate & print & download only.
I couldn't find any guides about that in primefaces website.
There is no JS Widget for Document Viewer however this can be accomplished easily with a JS function like this.
Note: Some buttons like presentationMode are special and need to be hidden a little differently.
pdfHideButtons : function() {
var pdfViewer = $("#YourDivId");
if (pdfViewer) {
$(pdfViewer.contents().find("#openFile")).hide();
$(pdfViewer.contents().find("#viewBookmark")).hide();
}
}
Then on your page add this code to basically hide the buttons after the page loads.
<script>
$(document).ready(function() {
setTimeout(function(){ pdfHideButtons(); }, 1000);
});
</script>
I am building a simple front end site and I'm using Bootstrap for styling.
I have built a section using modals. The user clicks on a button to open the modal and then sees a centred modal.
What I would Like
I want to be able to allow the user to click a button at the bottom of the modal and be redirected to another part of the page and the modal close.
I have successfully been able to move the user to the new part of the page by using <a> tags, href and id's and also by using onclick="window.location.href='#middle'", and have also been able to dismiss the modal.
THE PROBLEM is when the user clicks the button on the modal, they are redirected to where I want them to go to and the modal closes BUT then instantaneously the window moves back to the original place where the modal button was pressed.
I want to stop the moving back to the place where the original modal was clicked and leave the user at the place they got to when they clicked the button.
I have tried using <a> tags instead of <button> and it has the same effect.
Here is a working example jsfiddle showing the problem.
https://jsfiddle.net/peamanschesthair/kdu5gno1/42/
Any ideas are greatly appreciated.
Use setTimeout to delay the location change, after the modal hide event. To determine the element that triggered the dismiss, check the document.activeElement...
$('#exampleModalCenter').on('hide.bs.modal', function (e) {
var closeTrigger = document.activeElement.id
if (closeTrigger === 'btnMove') {
setTimeout(()=>{
window.location.hash = '#middle'
},400)
}
})
Demo: https://codeply.com/p/WW9aB8OeNx
Alternate option: Set a data flag in the modal hide event if the btnMove has been clicked, then chain the hidden event and check the data flag...
$('#exampleModalCenter').on('hide.bs.modal', function (e) {
var closeTrigger = document.activeElement.id
if (closeTrigger === 'btnMove') {
this.data = 'move'
}
}).on('hidden.bs.modal', function (e) {
if (this.data === 'move') {
setTimeout(()=>{
window.location.hash = '#middle'
},400)
}
})
I want to add a modal pop up on Feel Tourism. My site is designed in HTML code. I want to add this pop up to homepage of my HTML site. This Pop up should appear only once to a user.
document.getElementById('button').addEventListener('click',
function() {
document.querySelector('.bg-modal').style.display = 'flex';
});
document.querySelector('.close').addEventListener('click',
function() {
document.querySelector('.bg-modal').style.display = 'none';
});
I use the TinyMCE. The textarea create the tiny-editor. And the tiny-code create the iframe and in this iframe is the editor. So is it normal!
But now I want a div around the editor, in the body of the iframe. Is there an option to solve my problem?
enter image description here
I tried to make something
tinymce.init({
selector: "#mytextarea",
tinymce options: ... ,
toolbar: "add_div",
setup: function(editor) {
editor.ui.registry.addButton("add_div", {
text: "Add Div",
icon: "plus", // look editor-icon-identifiers page
onAction: function() {
var element = tinymce.activeEditor.dom.select("#tinymce");
var content = element[0].innerHTML;
element[0].innerHTML = "<div>"+content+"</div>";
}
}); // close registry.addButton
}, // close setup function
}); // close tinymce.init
How can I prevent the page from "jumping up" each time I click a link? E.g I have a link somewhere in the middle of the page and when I click it the page jumps up to the top.
Is the anchor href="#"? You can set it to href="javascript:void(0);" instead.
If you are going to a prevent default please use this one instead:
event.preventDefault ? event.preventDefault() : event.returnValue = false;
Let's presume that this is your HTML for the link:
Some link goes somewhere...
If you're using jQuery, try like this:
$(document).ready(function() {
$('a#some_id').click(function(e) {
e.preventDefault();
return false;
});
});
Demo on: http://jsfiddle.net/V7thw/
If you're not on jQuery drugs, try with this pure DOM JavaScript:
window.onload = function() {
if(document.readyState === 'complete') {
document.getElementById('some_id').onclick = function(e) {
e.preventDefault();
return false;
};
}
};
It will jump to the top if you set the link href property to # since it is looking for an anchor tag. Just leave off the href property and it won't go anywhere but it also won't look like a link anymore (and make sure to handle the click even in javascript or else it really won't be of much use).
The other option is to handle the click in javascript and inside your event handler, cancel the default action and return false.
e.preventDefault();
return false;