I want to write code for a pop up when you click a text link like: "Click here for my CV". Upon clicking, I'd like a pop up with my image in it, not to have it open in a new window.
I tried with Lightbox but it didn't work for me. The image popped up in a new window, which isn't what I want.
How can I do this?
As far as I can see, you will need to prevent the default action caused by clicking the link.
here is a fiddle to help
https://jsfiddle.net/bsasi/xu58hb67/1/
$("a").click(function(evt){
evt.stopPropagation();
evt.preventDefault();
$(".lightUp").toggle();
});
Related
I'm using The Viewer's reporting feature in Winform, Which has the ability to export pdfs, but before clicking on the export to pop up the save window, a "exporting" window will appear, I want to hide this window but I can't solve it after trying some methods, who can help me?
Click on the screenshot of the question
I tried something but couldn't solve it：
foreach(Form item in Applictaion.OpenForms){
//Hide this window
if(item.Title == "正在导出")
item.Hide();
}
I also tried this:
if (this.reportViewer1.Controls.Find("exportDialog", true)[0] is Form form)
{
//"exportDialog" may be the Name property value I tried to find in the source code, but it was prompted that "index out of range"
form.Hide();
}
Im trying upload image. When I click on "Choose image", the modal window is displayed. But i do not want to show this window.
I have to click on "Choose image" because html attributes (to which I upload an image) are not visible for watir, after click on "Choose image" html attributes are visible.
Im using this for upload image to "Choose image" :
img_path = File.expand_path('../image/png.png', File.dirname(__FILE__))
after this i use this variable(img_path) and i set image to "Choose image".
Now i want take a screenshot but modal window is still here.
I used :
1) browser.modal_dialog.close
2) browser.send_keys(:escape)
3) browser.window(:title => Watir::FileField::WINDOW_TITLES).close
I tried use all "alerts" commands, which i found at watir.com GUIDES - ALERTS
I found this but it doesn't work as well: browser.windows.last.use
I tried to execute some scripts but without response: execute_script
So question is. How to block or how to do not show Windows or Browser window after click?.
Or do we have to change html so that this attribute is visible in html without clicking on "Select Image"? After that we can upload the image without clicking?
Modal window after a click
browser.iframe(class: "modalwin").present?
browser.iframe(class: "modalwin").element(xpath that click on choose image).click
img_path = File.expand_path('../image/png.png', File.dirname(__FILE__))
browser.iframe(class: 'modalwin').file_field(path to set file).set img_path
browser.iframe(class: "modalwin").element(waiting xpath).wait_while_present
browser.iframe(class: "modalwin").link(xpath that just click on button OK).click
This is my code that left the window open. Unfortunately.
This is my first question here so i hope everything will be ok. Thank you for your answers. I hope everything is written here. Otherwise, i will try to write better informations.
The problem is that what has popped up is neither a "Browser Window" nor an "Alert." It is not even controlled by the browser, but by the operating system. Since Watir can only control the browser, it can not dismiss it.
Watir allows you to upload a file without clicking on the element that opens that dialog box in the first place. So remove the line that clicks the image and just send the image path to the file field element. It should not enforce visibility in order to interact with it.
I found a solution. I hope it help to others.
You need to execute script like this:
browser.execute_script(
'HTMLInputElement.prototype.click = function() {'\
" if(this.type !== 'file') HTMLElement.prototype.click.call(this);"\
'}'
)
img_path = File.expand_path(opts[:image_path], File.dirname(__FILE__))
browser.iframe(class: modal_win).element(:xpath, choose_image).click
browser.iframe(id: modal_iframe1).file_field(:name, 'data').set img_path
i want to show a % discount box on the center of the browser when somebody clicks the close button of the browser window . I have tried the
window.onbeforeunload = function (e) {
};
function formSubmit() {
window.unbeforeunload = null;
}
function but it opens the browsers own dialogue box, how can i customize it? or better, how can i open my own box? so that i can change the position and style of it.
Any help will be greatly appreciated,
Thank you,
The onbeforeunload event is the only event that fires (besides the onunload event, but don't use this) before the window leaves the page. The onbeforeunload event is special because it is the only event that will automatically be fired off once the user tries to leave the page, but has the option of staying on the page if the user clicks cancel.
So, to directly answer your question, if the user closes the window, hits the back button, or navigates to a new URL, you will have to use the onbeforeunload event. You can add text inside of the pop-up, but some of the default text will always stay there. You just have to return a string.
Now, if the user were to click on a link that is a part of your application or tries to log out, you can anchor an event to that, which could make a window pop up that has the "% discount box". The reason you can't anchor an event to the back button, external URL, or the close window button is that they don't belong to your application. So once they click one of those, the browser goes off on its way with nothing you can do, except for the onbeforeunload event.
As visible in the image, i have a "Hide" button. On click of the Hide button i want the left panel to be hidden and the right panel to cover 100% of the screen. On doing so, the "hide" button will change to show where the panel comes back to its original position.
For doing the same
xtype:'toolbar',
docked:'top',
items:[
{
cls:'hide',
xtype:'button',
text:"Hide",
iconMask:true,
ui:'back',
id:'hide',
handler:function () {
var viewWidth = Ext.Viewport.getWindowWidth();
alert(viewWidth);
desiredWidth = Math.min(viewWidth, 400) - 10;
Ext.fly('protocol').setStyle('width', desiredWidth); ;
}
},
I tried the above code to change the width of the panel dynamically but Ext.fly doesn seem to work.
What could be the solution to this?
Any help is appreciated.
A highlight of the left panel will be appreciated.
However, just looking at your image and I am making an assumption here.
If all you want to hide is the left panel containing the following
Then perhaps, what you can do is to do a jQuery toggle after declaring the LEFT and RIGHT panels within a "DIV" html
tag for example. See link below.
jQuery API for toggle
Also, if you're using a Javascript library or tool to build this, then you might want to get the source of the Javascript and dive into that.
From my experience, it is a lot easier to write a Javascript function on your own rather than to use something ready built.
Ext.getCmp('workItemPanel').hide();
worked well for me.
Consider a webpage contains a IFrame, in that IFrame it contains only one
text box and a close button is present outside the IFrame.
According to this scenario,
how to click on the close button by filling in some values in Iframe text box
i.e First thing is to select the Frame using the command selenium.selectFrame("1_frame"); and
enter the text using the command selenium.type("id=name","test");
Problem here is,I need to click on the close button which is present outside the Frame.
What command should I use to click on the close button, present outside the frame?
How should I bring the focus to close button ?
Can any one help me out!
Thanks in advance .
After entering value in text box set focus to main window if close button is not part of IFRAME. You can do this by selectWindow("null") command.
Use Xpath or css path of close button and then perform click(Xpath).
If you are using firefox you can use firebug to get xpath or css path.
If it is not in iframe u can even use click(id or name)
if your IFRAMEs are Static then it can be handled easily.
If dynamic iframe present then You have to work from framework label.