Automatically close a popup - javascript

I have a wordpress website and I created a popup which has a button that links to Calendly popup. So, when I click on the button, it opens calendly popup in the background but doesnt closes the first popup automatically.
Here is the code I have embedded in the plugin---
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/#'});return false;">
<form action="onclick="closeSelf()"">
<input type="submit" value="Schedule a Demo" />
</form>
</a>

In Angular and javascript first declare calandly
declare var Calendly: any;
Then in your function calling this one to close calendly popup window
Calendly.closePopupWidget();

Related

How to open a modal on an element when the page loads?

I am trying to call the specific link id #ext when page loads instead of clicking it manually to show the modal popup. However I am not able to achieve it. Can someone look into code and suggest a change?
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
<img src="image.jpg" />
</div>
<!-- Link to open the modal -->
<p>Open Modal</p>
The above code works fine when I do click on the link on the page "Open Modal". I want it to be called when page is loaded to show popup auto.
JSfiddle
Just for reference I am using this to show a modal popup: https://jquerymodal.com/
From the documentation:
You can manually open a modal by calling the .modal() method on the element:
As such you just need to call the modal() method on $('#ex1') when the page loads:
jQuery(function($) {
$('#ex1').modal();
});
jQuery(function($) {
$('#ex1').modal();
});
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css">
<div id="ex1" class="modal">
<img src="image.png" />
</div>
<p>
Open Modal
</p>

Adding link to featherlight.js pop-up

A pop-up appears when someone visit my website. I've used featherlight.js. i've added link to pop-up in HTML and when i click it, it doesn't work. I think it has something to do with featherlight.js
Here is the HTML code
<div class="lightbox" id="lightbox">
<p>Hello: <img align="right" src="img/IE-flag.gif"></p>
<br>
<p>Register now to qualify.</p>
<br>
click me
<br>
<center><p style="font-size:10px">No thanks</p>
<script src="js/featherlight.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$.featherlight('#lightbox', {
closeOnClick: 'anywhere'
});
</script>
With closeOnClick: 'anywhere', you're telling Featherlight to intercept clicks everywhere, including in the dialog and close the dialog...
Remove that option and you'll be ok.

Highslide not working

I installed Highslide in my website but it seems like it's not working.
I saved the Highslide folders into my website main folder and put this in the head of my HTML document:
<script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css"/> <script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/'; </script>
But when i try to use the image zoom pop up code it doesn't work:
<a class="highslide" href="images/thumbstrip13.jpg" onclick="return
hs.expand(this)"> <img src="images/thumbstrip13.thumb.png" alt=""/>
</a>
The image doesn't pop up like it should but it simply open in another window. Where did I do wrong?

Colorbox doesn't open on second click

I have strange problem with colorbox, the code I have is like:
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<img
src='/someimage.jpg' height="100px" width="100px"
onclick='$.colorbox({inline:true, href:"#inline_content"});' />
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
Some test inline
</div>
</div>
So, first time I click, it fades the page and opens me hidden content as popup, but when I close that popup, then click on the image again, second and all further times, it just fades the page, but doesn't show me popup with hidden content. What it could be? Appreciate any help. Thanks!
Found the problem, I used minified version
<script src="jquery.colorbox-min.js"></script>
when I changed to normal version
<script src="jquery.colorbox.js"></script>
it started to work.

open a new form in the same colorbox after pressing the submit button

i have a form with a submit button open in a colorbox and i want that after pressing submit a new form will show to the same colorbox.
so i have the main page
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
<script type="text/javascript">`
$(function()
{
$('#link_content').colorbox({opacity:0.3});
});
</script>
and the part where i open the ragister.jsp
<a href='ragister.jsp' id='link_content' ><h2>Register here </h2></a>
the register.jsp has a form with the submit button that after pressing it calls a process.jsp where the process.jsp validate if the text box of the ragister.jsp are correct or not if they are they are saved in database if they are not the process.jsp include another form with the specific error (error.jsp)
so what i want is that the process.jsp and the error.jsp form to display in the same colorbox of the ragister.jsp
thanx!
For this to work you need to force colorbox load within iframe. As i recall all you need to add to .colorbox() is 'iframe': true but that also requires that you specify exact width and height because colorbox has no way to know what's happening in that iframe it creates.

Categories