I have a main page that has a popup (please see window number 1 in the image I added). In this popup, there is a button of skip. if the user presses skip button, the popup is gone (and then, the user sees the main page) (window number 3). but if the user doesn't press on the popup, but the main window, the color of the main window becomes to a gray color (window number 2). if I press the main window about 3 times, then the color will be changed into a white color (window number 3).
I think I have to hide my popup if the user presses the main window instead of the popup.
how can I fix it?
my popup is called: class="popup_window". the X and the SKIP buttons are called: btn_x and btn_skip.
any help appreciated!
UPDATE this is my welcome_msg java script code:
// welcome message
$("#welcome_dialog").lightbox_me({
centered: true,
onLoad: function() {
//alert("Page is loaded");
}
});
I've just looked at the lightbox_me plugin website and on the homepage it lists the possible options you can use. You need to add the following to your code: "closeClick : true".
So the code you posted above would look like this:
$("#welcome_dialog").lightbox_me({
centered: true,
closeClick: true,
onLoad: function() {
//alert("Page is loaded");
}
});
As described on the site:
CloseClick true Whether or not to close the lightbox with the user clicks the overlay.
Source: http://buckwilson.me/lightboxme/
Related
I'm working in a project using bootstrap framework and I read there are different ways to open a modal window, in my case I open it with javascript with this code:
$('#formVenta').modal({backdrop: 'static', keyboard: false});
I did this because the client asked me to avoid close the modal when click outside but now he wants to press click outside and close the modal again but when there is no content inside a specific div inside my window
<div id="content_goes_here"></div>
I think to solve this in this way
$(document).click(function(e) {
//check if modal is open
if ($('#formVenta').is(':visible')) {
//check if div has content
if ($('#content_goes_here').html().length > 0) {
//do something
}
}
});
The problem I see is that there are text input outside that div and If I want to search something it will close when I make click in the input because there will be not content yet inside the div and I want to avoid this issue.
Is there a way where only when I make click outside the modal window check if the div is empty and make the opposite of the way I opened the window in this case the opposite of this?
$('#formVenta').modal({backdrop: 'static', keyboard: false});
for example change the value of the property backgrop.
I hope you can help me, thanks.
sorry it took a while to find the right properties but here is the best example
$('#formVenta').data('bs.modal').options.backdrop = false; or
$('#formVenta').data('bs.modal').options.backdrop = static;
you can take a look at the current properties you have set by doing
alert(JSON.stringify($('#myModal3').data('bs.modal').options)); or change the alert to console.log()
so you can put an event on the div for when it changes to run the validation function and inside of the validation function you can change the options of the modal with the above code
I want to show popup by click, but only if condition is false.
After click to extension icon background js searchig for tab with current name. If tab found background js continues working. If not found - i want to show popup with instructions. Can`t understand how to just show popup in this case.
I can set popup by browserAction.setPopup(), but popup will be displayed only after next clicks.
I just want to show my popup one time.
It is definitely posible, I've seen this behavior on other extension.
var pcTabs; // tabs array
chrome.browserAction.onClicked.addListener(buttonClick);
function buttonClick() {
// getting tabs...
if(pcTabs.length != 0){
// working with finded tabs
} else{ // tabs not found
// show popup.html here. this is the question
}
}
upd.
This is my background.js. All code also in repository.
How to replace alerts to popups?
In short: you can't do it the way you describe.
When a popup page is set, chrome.browserAction.onClicked won't fire, and the popup will show.
When a popup page is not set, your event listener will execute, but you cannot show a popup programmatically. The most you can do is to set a popup for the next click.
So, what to do with it?
1) You can do an ugly hack (kind of) described in Edwin's answer. Always show the popup, check the condition as soon as possible, message the background and execute window.close() if the condition is met.
Of course, it is ugly.
2) The proper way to do this would be updating the popup whenever the condition can potentially change. That is, whenever you add/remove data from pcTabs, you should set/unset the popup with chrome.browserAction.setPopup
// ... somewhere ...
pcTabs.push(/*...*/);
chrome.browserAction.setPopup({popup: ''});
// ... somewhere else ...
pcTabs.pop(/*...*/);
if(!pcTabs.length) chrome.browserAction.setPopup({popup: 'popup.html'});
chrome.browserAction.onClicked.addListener(function() {
// Assume condition is met, popup didn't show
});
3) The fancy way to do it is to use experimental JavaScript method, Array.observe, that is only supported in Chrome.
var pcTabs = [];
Array.observe(pcTabs, function(changes) {
changes.forEach(function(change) {
if(change.object.length) {
chrome.browserAction.setPopup({popup: ''});
} else {
chrome.browserAction.setPopup({popup: 'popup.html'});
}
});
});
Alright this is my code:
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
if (!tabs[0].url.includes('google.com')) { //check if current tab is not google: if false show popup, you can just put an else at the end and do w.e with your popup
chrome.tabs.query({currentWindow: true, url: 'https://*.google.com/*'}, function(tabs) { //since current tab is not google query tabs with google
if (tabs.length) { //check if there are any pages with google
chrome.tabs.highlight({tabs: tabs[0].index}, function(w) {}); //this is what I chose to do idk what you want to do but you can write w.e here
} else {
chrome.tabs.create({url: 'https://google.com'}); //other wise no pages with google open one
}
});
};
});
I've one scenario. I'm opening a dialog box, but my parent window refreshes after every one minute. Let's say my dialog box is opened for 5 minutes, then I have to press 5 times the X button to close that dialog box. Any idea why this is happening ?
For opening the dialog box I used the following code:
var dialogOptions = { overflow: 'scroll',height: 100,width: 500,show: true, hide: true, modal: true};
$('#act_summary').dialog(dialogOptions);
Thanks.
You need to check if that dialog exists first:
if (!$('#act_summary').length > 0){
$('#act_summary').dialog(dialogOptions);
}
If you don't you'll just keep creating new ones. This is why it appears that you have to click it 5 times. You're actually closing 5 instances of the dialog.
I am using fancybox to show a page (say child.htm) within another page(parent.htm).
I know how to automatically reload the parent page after closing the iFrame:
$(".fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});
However, my requirement is more specific. I need to close the iframe and then reload the parent page (parent.htm) only when an user clicks on a button (e.g : clicking on button "OK" present in child.htm).
The problem with the code snippet that I'm having is that the parent page is getting reloaded even when I click on the close icon or when I click anywhere outside the frame. This is something that I want to restrict. My agenda is to cause page refresh only on button click.
I would try something like this:
$('.fancybox').fancybox({
href : 'child.html',
type : 'iframe',
afterShow: function(){
$('.fancybox-iframe').contents().find('#button').click(function(){
// do something
...
// reload parent window and close fancybox
window.parent.location.reload();
window.parent.$.fancybox.close();
});
}
});
I have a div with contents to be displayed as popup, however, I am not sure how to open it in a popup using magnific popup script automatically, just like as an alert.
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
focus: '#zipCode',
modal: true
});
});
when I fired the div with class "popup-modal" using click event, I am seeing screen with gray color having value rendered as true.