I am working on a modal dialog which helps me upload external files to a web-application. So far I am able to add an external file to the upload popup of the application. But, I am struggling to get back the control from Modal dialog to the upload pop-up. Here’s the locators for the popup div element
<div tabindex="-1" class="ui-dialog-buttons" role="dialog" aria-describedby=" uploadAttachmentsDialog" aria-labelledby="uid1" style="left: 338px; top: 223px; width: 600px; height: auto; display: block; position: absolute; z-index: 20002;">
By using the above “aria-labelledby” attribute I was able to get the pop-up and launch the modal dialog. But, after the modal dialog closes after selecting a file and clicking Open button, I am not getting the focus/control back to the popup. Can anyone please guide me on this. Following is how I have handled the modal
window = RAutomation::Window.new(:title => "Open", :adapter => :autoit)
window.text_field(:ID => "1148").set "path_to_file"
window.button(:ID => "1").click
Related
I'm using vue and foundation 6.2.3 to create a modal:
<div :id="modalId" class="reveal" data-reveal v-foundation-element aria-labelledby="modal button" aria-hidden="true"
role="dialog" :data-options="allowEscape ? 'closeOnClick:true;closeOnEsc:true;' : 'closeOnClick:false;closeOnEsc:false;'">
When I click the button the modal shows up, but I can click outside the modal body and press escape to close the modal despite closeOnClick:false and closeOnEsc:false being set.
Here's the twist: I'm using hot reload with webpack and I can do a weird thing to make it start working.
I remove v-foundation-element from the div
I save and reload the page.
I add v-foundation-element back to the div
the page gets hot reloaded
I can no longer click/esc out of the modal
here's the rendered HTML for the modal when it's in the working state:
<div id="choose-your-package" data-reveal="ianmsm-reveal" aria-labelledby="Choose Your Package" aria-hidden="false" role="dialog" data-options="closeOnClick:false;closeOnEsc:false;" class="reveal" data-yeti-box="choose-your-package" data-resize="choose-your-package" tabindex="-1" style="display: block; top: 129px;">
and here's the modal in the non-working state:
<div id="choose-your-package" data-reveal="axb8cp-reveal" aria-labelledby="Choose Your Package" aria-hidden="false" role="dialog" data-options="closeOnClick:false;closeOnEsc:false;" class="reveal" data-yeti-box="choose-your-package" data-resize="choose-your-package" data-events="resize" style="top: 129px; display: block;" tabindex="-1">
I'm not sure why this is happening. How do I make it work consistently?
I think maybe you are trying to use the JSON options in the data attribute, which, as far as I know isn’t possible.
Try setting data-close-on-esc="false" and data-close-on-click= "false". Maybe the plugin you have has the JS options allowed in data options, but I doubt it.
I have a modal window (using bootstrap), with a close button. The modal window opens and closes fine in most browsers. However, in internet explorer, there is a problem. We can open the modal window fine, and close it fine ... but if we try to open it again, it wont.
Most of the javascript functionality is in bootstrap. Below is the html for the open button [I believe data-toggle="modal" and data-target="#exampleModal" are the key to opening the window]...
Get The Demo
...and the html for the start of the modal window, with the close button [note the id="exampleModal" tells which window to open. And the data-dismiss tells to close "modal"...
<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="padding-right: 17px; display: block;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- CLOSE BUTTON -->
<div class="row at-modal-close-box">
<a href="#" data-dismiss="modal" aria-label="Close">
<img src="https://www.amazingdg.com/_dev/temp/images/modal-close-btn.svg" alt="Close Demo Form">
</a>
</div>
...
You can view the page here:
https://www.amazingdg.com/_dev/temp/
Note: When I click the open button a second time, there is an error in IE's console ... Object.keys: argument is not an Object. Note: this error doesn't occur the first time opening the modal window. Not sure how to fix it...
---------------------------------------------------
I tried to remove the fade class ... that made the modal window show ALL of the hidden elements in the form (required fields, successfully sent message, etc.)
if ($.browser.msie) {
$("#exampleModal").removeClass("fade");
}
---------------------------------------------------
I tried to change the fade transition (not supported by IE) using an IE media query. This removed the fade, but didn't fix the issue.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */
.fade {
transition:none !important;
}
}
I had a similar issue on IE, and it was solved by doing the following:
Whenever you open the modal, using:
modal.element.modal();
Send in an empty object, like this:
modal.element.modal({});
This fixed the issue for me in IE (without the need to mess with the fade classes) and didn't change the behavior in other browsers!
Remove fade class which does not work in IE
if ($.browser.msie) {
$("#exampleModal").removeClass("fade");
}
I was facing the same issue that got a very simple fix.
You can simply toggle the modal using jQuery in the function that you call:
$("classnameORidName'").modal("show");
I have a number of SoundCloud widgets on a long web page (so the web page doesn't change position like, say, jump to the top when a SoundCloud file is invoked).
But, I can't find a close button for the widget, so there is potential for many widgets to be open at one time. And it appears that if too many are open, a new one does not load the sound file. (It is neat that when a new widget is opened, any existing visible widgets are automatically paused.)
Has anyone found a way to allow the user to close a SoundCloud widget?
In my website I just made my own button that's in the same container as the widget iframe and applied some CSS rules to it.
HTML:
<div id="playerContainer">
<span id="closePlayer" class="glyphicon glyphicon-remove"></span>
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/164855780&color=5ab7e6&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false" style="display: inline;"></iframe>
</div>
CSS:
#closePlayer {
position: fixed;
bottom: 142px;
right: 3px;
z-index: 999;
}
JS (Includes jQuery):
document.getElementById('closePlayer').addEventListener('click', function() {
$(this).parent().fadeOut(400, function() {
$(this).remove();
});
});
How it looks like: http://i.imgur.com/4HJr4HX.png
I know this was published a while ago but I just saw it, hope it'll help somebody :)
Create your own button and use kill() on whichever player you want to destroy.
I have a like button that is loaded from ajax on to my page. When the user clicks it, a popup appears with a textbox that the user can fill and a description of my website. I want to access the dom of that popup, which is in an iframe.
This is so I can add text to the textbox.
All of the following is done in Firebug's Console.
I access the iframe with this:
var x = document.getElementsByTagName("iframe")[3] // the '3' selects this specific iframe
Then, I try this...
x.documentWindow
And I get
undefined
Now this probably has something to do with it, but Firebug's DOM Window does not show inside the iframe. It just shows this:
<iframe id="f3fb49f36c" name="f1b13ffab" scrolling="no" style="border: none; overflow: hidden; height: 225px; width: 401px; " class="fb_ltr" src="http://www.facebook.com/plugins/comment_widget_shell.php?locale=en_US&master_frame_name=f39fb5fa34&offsetX=0&sdk=joey"/>
BUT, in in the Element tab under Chrome's Developer Tools, I can see everything inside it.
Any help you can offer is appreciated.
Take a look at https://en.wikipedia.org/wiki/Same-origin_policy.
It's not possible.
I want to close both the i frame as well as the modal dialog box on a button click present inside the file which is called in the iframe.. the file included in the i frame is an external file having tabs.. So how to close the dialog box and iframe on a button click which is defined in the file..
I had searched the net for days but did'nt solved the problem....
//My Code for the iframe for and modal dialog box is as follows..
I want to close both the i frame as well as the modal dialog box on a button click present inside the file which is called in the iframe.. the file included in the i frame is an external file having tabs.. So how to close the dialog box and iframe on a button click which is defined in the file..
// here is the code for i frame
<div id="dialog_with_tabs" title="Vehicle Selection">// div of modal dialog
<div id="tabs_in_dialog">
<ul>
</ul>
<iframe id="myframe" src="add.php" width="100%" height="400" frameborder="0" scrolling="auto" seamless="seamless"> /// here i have included a file which has tabs..
</iframe> /*****************End of Iframe*********************/
</div>
</div>
/********************End of Div of Modal Dialog box***********************/
I want to close both the i frame as well as the modal dialog box on a button click present inside the file which is called in the iframe.. the file included in the i frame is an external file having tabs.. So how to close the dialog box and iframe on a button click which is defined in the file..
//code for modal dialog box popup is as follows..
<script type="text/javascript" > //script for modal dialog
$("#dialog_with_tabs").dialog({
bgiframe: true,
autoOpen: false,
height: 400,
width: 700,
modal: true,
buttons: {
}
});
$("#dialog_with_tabs").bind('dialogopen', function() {
/* init tabs, when dialog is opened */
$("#tabs_in_dialog").tabs();
});
$("#dialog_with_tabs").bind('dialogclose', function() {
/* your function */
window.location.reload(true);
/* destroy tabs to avoid problems on re-open */
$("#tabs_in_dialog").tabs('destroy');
/* destroy dialog to avoid problems on re-open */
$("#dialog_with_tabs").tabs('destroy');
});
/* your function to open the dialog */
$('#tabtest').click(function() {
$('#dialog_with_tabs').dialog('open');
})
//$("#dialog_with_tabs").dialog('open'); // opens the modal dialog
<!-- jquery part -->
</script>
/*********************End of script*********************/
I want to close both the i frame as well as the modal dialog box on a button click present inside the file which is called in the iframe.. the file included in the i frame is an external file having tabs.. So how to close the dialog box and iframe on a button click which is defined in the file..
// so how can close the dialog and iframe on a button click
any help will be appreciated......
Not sure how to implement this precisely, but I think this route will work!
http://davidwalsh.name/window-postmessage
Or, try this thread?
Pass jquery variables between iframe and parent