Close a fancybox using pure javascript - javascript

After opening a jquery fancy box i'am trying to keep the iframe's content light as much as possible by avoiding the reload of jquery package. so i want to close the fancy box (iframe) using pure javascript, i've tried window.close(); but nothing happened.

I think you want to close fancybox on button click from the iframe.
for that you have to do a code like this.
Add this button in your iframe page.
<button class="btn btn-danger" type="button" id="btnCancel" onclick="self.parent.CloseFancyBox()">Cancel</button>
write down below function in your parent file.
function CloseFancyBox() {
$.fancybox.close();
}
If you want to close without click a button then you can directaly right below function in your iframe page.
function closeFancy(){
self.parent.CloseFancyBox();
}

Problem solved. window.close(); do the job
thank you for your answers

Related

Calling ng-click with javascript

I need to go way back on a site that has a "Load more" button. I'm going to have to press it like 100 times and have to scroll down to bottom of page each time to click it.
Is there some way to call the function by pasting som Javascript in the Chrome console?
<button class="button-dark button-icon--next button-right" ng-hide="vm.fetchingMoreData" ng-if="vm.pageNo <= vm.numberOfTransactions" ng-click="vm.showMoreTransactions()" ng-disabled="vm.fetchingMoreData" ng-bind="'see_more' | i18n">Show more</button>
In Javascript you can use
element.click()
after selecting the button to click on a button programmatically
MDN
In your case, you can also call that function of ng-click in js i.e
vm.showMoreTransactions()
directly in your script

How do I programmatically click a button on this page when .click() does not work?

Actually, I am working on an extension which help to buy product from flipkart during flash sale. On teh product page I can't click on "Buy Now" button with the help of JavaScript its show me undefined this is the code of Buy Now button:
<form><button class="_2AkmmA _2Npkh4 _2kuvG8 _7UHT_c" type="button"><span class="_279WdV"></span> <!-- -->BUY NOW</button></form>
The Button is in this page
I am using the code to click this button in my JavaScript file
$("._2AkmmA._2Npkh4._2kuvG8._7UHT_c").click();
However, even when I go to the page on the site and, in the console, execute
$("._2AkmmA._2Npkh4._2kuvG8._7UHT_c").click();
The console shows undefined and does not start the "Buy Now" process that is started by manually using the mouse to click on the "Buy Now" button. In the console, executing
$("._2AkmmA._2Npkh4._2kuvG8._7UHT_c");
Shows:
<button class="_2AkmmA _2Npkh4 _2kuvG8 _7UHT_c" type="button"><span class="_279WdV"></span> <!-- -->BUY NOW</button>
which is the correct button that I desire to programmatically click. Note that even though I used $(), what is returned is not a jQuery Object.
If I click on that button manually, I'm shown the dialog for "Buy Now". You can go to this page and try it yourself.
I am not getting what is the problem here. Is there any problem in my code or its any kind of protection form filpkart website side?
I think you must use multi class selector in jQuery like this:
$("._2AkmmA, ._2Npkh4, ._2kuvG8, _7UHT_c").click()
As you see I use , between class
or reduce your class like this :
$("._2AkmmA").click()
You have to call the code only when All elements are full loaded, otherwise it won't find it. You must wrap in JQuery like :
$(document).ready(function(){
$("._2AkmmA._2Npkh4._2kuvG8._7UHT_c").click();
});
Your code is probably running before the DOM is fully loaded.
Try wrapping your code with $(document).ready(function(){... which will ensure that the code inside will only run once the page Document Object Model (DOM) is ready.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("._2AkmmA._2Npkh4._2kuvG8._7UHT_c").click();
});
function test(){
alert('clicked');
}
</script>
<form><button class="_2AkmmA _2Npkh4 _2kuvG8 _7UHT_c" type="button" onclick="test()"><span class="_279WdV"></span> <!-- -->BUY NOW</button></form>

redirecting from a modal using ng-click and the data-dismiss doesn't work

I was trying to navigate from a modal in a page to another page by adding a function to ng-click. When I remove the function assigned to ng-click, the data-dismiss works properly and the modal gets removed. But when I use the ng-click with a function, which redirects to an alternative page, it gets directed to the page, but the modal has not been dismissed. (the new page seems in the disabled state)
<button type="button" class="btn btn-success" ng-click="addNewProject()"
data-dismiss="modal">Add Project</button>
The addNewProject() function redirects to the other page and adds the details in the modal to the database.
I would like to know a way to get the page which was loaded later, in the editable way. (the modal should be completely removed.)
$(".modal-backdrop").hide();
Adding the above line in the ng-click function got rid of the issue.
Please have a look at http://angular-ui.github.io/bootstrap/
Refer Closing Twitter Bootstrap Modal From Angular Controller
$scope.close = function(result){
dialog.close(result);
};
or
use this inside ng-click function
$('#myModal').modal('hide');

how do i link an a tag to an onload modal window?

I figured out how to make a modal window pop up as the page loads, but I was wondering how I can make it appear also after clicking on a link, so that if a first time user comes to the website, closes the onload modal window, and then wants to sign up, he can do so.
I got the code from: http://www.aspdotnet-suresh.com/2013/03/open-show-jquery-popup-window-on-page.html
and the website that i'm using it on is http://thewildernesswalk.businesscatalyst.com/
If you have a better solution than the tutorial i found (which would be great), I am all ears, but it seems like some of the other answers i found out there mess with the code that makes the nav stick to the top and the "back to top" button appear.
Thank you in advance
Assuming the code at the link you gave, you may insert the following in your HTML <body> in order to show the modal upon clicking hyperlink:
Click me!
<script>
var elem = document.getElementById('hyper');
elem.onclick = showModal;
function showModal() {
$('.popup').show();
return false;
}
</script>

JavaScript: Prevent a button from being pressed before entire page is loaded

How can I prevent users from pressing my web-page buttons before the page is fully loaded?
i.e.
I have a button that opens a lightbox. The JS for the lightbox is loaded last in the page for quicker response time. So if the user presses the button before the page is fully loaded - he either gets a JS error or the lightbox data is opened on a blank page.
I'm using Javascript with MooTools.
If I understand correctly neither
<body onload="...">
nor
$('#yourButton')...
guarantees that the document has finished loading. The (jQuery) method that does:
$(document).ready(function() {
$('#yourButton').attr("disabled", false);
});
Make your button disabled. After the page is loaded - make it enabled
Here is a JQuery(sorry for not being "clean" Javascript example)
$('#yourButton').attr("disabled", false);
here's an example:
<body onload="document.getElementById('button1').disabled=false">
<button id="button1" disabled="1">
ok
</button>
<body>

Categories

Resources