Adding link to featherlight.js pop-up - javascript

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.

Related

Automatically close a popup

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();

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>

Self-container close-able full screen modal overlay for existing webpage

Please forgive me for not including any code, but I always struggle with front-end. I have found numerous blogs and how-to's for putting up a full-screen modal display, but all of them have disrupted my site's existing css or JavaScript in some way, some how. Can anyone point me to a simple, self-contained example that is guaranteed to be a drop-in solution for a website that already has its own things going on?
I googled full screen modal and found this. As close to a drop in solution as you could ask for I imagine. You'll need to download their lib though.
Taken from their site:
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>
<body>
<!--Call your modal-->
<a id="demo01" href="#animatedModal">DEMO01</a>
<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class="close-animatedModal" -->
<div class="close-animatedModal">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="yourPath/animatedModal.min.js"></script>
<script>
//This is your script
$("#demo01").animatedModal();
</script>

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.

$('#id1').html(" ") removes all children of #id1 from DOM, or they are still there?

I do something like this:
$("#id1").html(data);
I refill a div with html but when I try to get the html of a child of this refilled div I get an empty string although it has, it's like the old child is still there but without html.
Edit:
I tried to reproduce my problem, here is the html: (click 2x times on refill and after click open you will see that nothing is going to happen)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/dot-luv/jquery-ui.css"/>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#r1").click(function(){
var x = $("#main").html();
$("#main").html(x);
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<script type="text/javascript">
$(function(){
$("#a1").click(function(){$("#forDialog").dialog();});
$("#a2").click(function(){$("#forDialog").dialog('close');});
});
</script>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
</body>
</html>
I'm generating this javascript dynamically so the scripts that register a1.click and a2.click need to be inside the main div
I'm not quite sure as to the exact goal of your code, but I can make 3 general suggesions:
Use .delegate() to attach to once and future elements.
You can .hide() the HTML for you dialog box.
You can prevent the page from refreshing when a link is clicked using event.preventDefault(); in the click handler of that link.
Applying those suggestions to your code results in the following working code:
<script type="text/javascript">
$("body").delegate("#a1", "click", function(){
$("#forDialog").dialog();
});
$("body").delegate("#a2", "click", function(){
$("#forDialog").dialog('close');
});
$(function(){
// Hide HTML for the dialog.
$("#forDialog").hide();
$("#r1").click(function(event){
var x = $("#main").html();
$("#main").html(x);
// If you don't want the page to refresh by clicking
// on this A element, use the following:
event.preventDefault();
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
jsFiddle example
The old sub-DOM under the element will be gone after you reset its content with .html(stuff). It may exist floating around in memory somewhere, but it's detached from the DOM and you can't get at it.

Categories