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

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>

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

Can't Share AJAX HTML, because Parent Page Meta Being Read

I have a parent page with thumbnails that link to a Jquery AJAX modal, so that when someone closes the AJAX html, the user will return to the scrolled part of the parent page that they clicked on. Everything is working as far as navigation and related thumbs etc. The only problem I am running into is that when i try to share the AJAX html page, the parent is being read, and not the AJAX html page meta.
Is it possible to use some script to have the first set of meta elements skipped and the AJAX meta read? Does that make sense?
Here is the page I'm working on --> Example
HTML:
<a class="thumb {url_title}" rel="modal:open" href="/{segment_1}/{url_title}">Blah</a>
SHARE BUTTONS:
<!-- AddToAny BEGIN -->
<a class="a2a_dd" href="https://www.addtoany.com/share"><i class="far fa-share-alt"></i></a>
<script>
var a2a_config = a2a_config || {};
a2a_config.onclick = 1;
a2a_config.num_services = 6;
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
Jquery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"> . </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

jquery load content in modal div, it shows content only at the second click

I have a page made with jquery/bootstrap, with the following code that when clicked it will open a modal:
<a class="projects" data-id="test.html"
href="#modal" data-modal-target="#modal" data-modal-effect="fadein">
LOAD CONTENT
</a>
more down in the page I have the modal div:
<div id="modal" style="display: none;">
<h4>Modal title</h4>
<p>dummy description</p>
<div id="dinamiccontent">X</div>
</div>
then I have this script:
<script type="text/javascript">
$(document).ready(function(){
$(".projects").click(function(){
var lurl = String($(this).data('id'));
$("#dinamiccontent").load(lurl);
});
});
</script>
The problem is that when I click on the link the modal opens correctly and shows X at the dinamiccontent div when it should show the content of test.html, but if I click a second time the same link, it opens the modal with showing correctly the test.html content!
I'm spending hours on reading docs, answers and sites, and made many changes to the code but I can't come up with a solution.
I would like to load the modal with the content of test.html preloaded in the dinamiccontent div at the first click on the above link. Is it possible?
I was actually able to get a working version of this using both Bootstrap 3.3.7 and 4.0.0-alpha.6
I did restructure your modal to follow the Bootstrap guidelines, it needs more than just an id="modal". I also changed your attributes in the link that toggles the modal. Try each one of these changes individually to see if they can fix it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<a class="projects" href="" data-id="test.html" data-toggle="modal" data-target="#modal"> <!-- Note the 'data-toggle' and 'data-target' -->
LOAD CONTENT
</a>
<div class="modal fade" id="modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
<script>
$(function() {
$(".projects").click(function() {
var lurl = String($(this).data('id'));
$(".modal-body").load(lurl);
});
});
</script>
</body>
</html>
Here is a link to check it out: https://glitch.com/edit/#!/chatter-polish

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.

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.

Categories