Open Bootstrap Model and Load load iframe with one button - javascript

I need a button to open both "Bootstrap Modal" and Load iframe.
for now i have following concept:
User click on Modal Button Modal opens and then user need to click on another button in the Modal to load the iframe.
i found some solutions, but most of them using javascript with url in it. in my case i cant use this because i get the url from a button where this button has a dynamic id that get generated by a shortcode. as well i cant add this shortcode in the javascript, i already tried.
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#fileShareModal[wpv-post-id]">Open Modal</a>
<a class="btn btn-warning" href="[wpv-post-url]?layout_id=201" target="myiFrame[wpv-post-id]">click to load iframe</a>
<iframe name="myiFrame[wpv-post-id]" src="about:blank" class="max-h-600"></iframe>
I would like to get the dropdown-item button to open the modal and load the iframe. is that possible while keeping the structure of my urls the same?

You can open modals with jquery:
`
$(selector).modal("show");
`
So that means you can add an event to the button wich loads the iframe, and also open the modal
You need to add ids to each button:
`
$(idOfTheIframeLoader).click(e =>
$(idOfModal).modal("show")
);
`

Related

<button> inside <a> is reloading the page

I have an react app with structure like this.
private navigate(){
alert("navigate");
}
<a href="#gotothisid">
<button onclick="navigate()"></button>
</a>
<div id="gotothisid">
</div>
On click, the page is reloading after the alert but it should just shift the focus to #gotothisid.
What is missing here? Is there anyway to achieve both button click and a href together without reloading the page?
I want to achieve both button click and a href together without reloading the page.
The default behaviour of a button is submit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type.
You just have to add:
<button onclick="navigate()" type="button"></button>
so your button won't trigger a submit that reload the page.

Link inside the Fancybox popup

I'm triggering Fancybox popup automatically when the page is loaded.
Inside that popup there's a HTML content with link to other page.
That link doesn't work when it's loaded with Fancybox.
Here's my code:
<div class="popup">
<div class="container">
<h4>Description text...</h4>
<a class="btn btn-green" href="/the_url_of_the_page">View more</a> //this link is not working
</div>
</div>
<script>
$(document).ready(function() {
$('.popup').fancybox({
transitionEffect : "zoom-in-out",
}).trigger('click');
});
</script>
How can I set that link to work?
I'm using Fancybox v3.1.28
First, links, buttons, etc are working perfectly fine in fancybox.
The problem in your example is caused by the fact that you have used .popup selector to initialize fancybox, but that matches element containing your link. So, your code can be translated to 'start fancybox when user clicks on element having class ".popup"'. But, your link is inside element with class name ".popup", therefore it starts fancybox.
Finally, your code does not make any sense. If you wish to immediately start fancybox, then use $.fancybox.open() method, see https://fancyapps.com/fancybox/3/docs/#api for samples

Reloading and Unloading CSS on Modal Event Listeners

I want to be able to unload css when the modal closes and reload css when the modal opens again. The reason for this is because I noticed that if the user stays on the page after closing the modal- the css remains and they'd have to refresh for the page to appear as it did before the modal was opened.
Another solution would be to change my CSS but as its hundreds of lines I would rather find a way to do this using javascript manipulation. Below is the code I was trying to use. Anyone know where I am going wrong? The modal opens with css but after closing the modal the modal does not reload the css when its opened again.
$('.modal').on('shown.bs.modal', function() {
window.loadCSS(`pathname/css/mycssfile.css`);
});
$('.modal').on('hidden.bs.modal', function () {
$("link[href*='mycssfile']").prop('disabled', true);
$("link[href*='mycssfile']").remove();
});
You can make the style display or not. attache the CSS file to the <head> in the page you want it to open like this:
<link rel="stylesheet" href="css/modal.css">
don't forget to make the modal display: none is the CSS file.
then make "open" link/ button like this:
<i class="eye far fa-eye"></i>
in the modal don't forget to make the "close" link/button:
<span style="font-size: 40px;" onclick="document.getElementById('open1').style.display='none'" class="close" title="Close Modal">×</span>

jquery colorbox 'inline' modal opening for first time only

I am using jquery colorbox 'inline'. It is opening first time from a specific link.
<a class="addFile inline" href="#inline_content">
<img src="img/nav-icons/icon_plis.png" alt="">
Add File
</a>
with the jquery written over
$(".inline").colorbox({inline:true, width:"40%",href:"#inline_content"});
but when I am trying to open another inline content (#inline_content2) from different link(s) on the same page, the previous inline content (#inline_content) is opening. Please help me to resolve the issue.
-thanks
in click event for
$('.inline').on('click',function(e){
e.preventDefault();
$(this).colorbox({inline:true, width:"40%",href:$(this).attr("href")});
});
or you can use .each();
$('.inline').each(function(){
$(this).colorbox({inline:true, width:"40%",href:$(this).attr("href")});
});
if both of them not work make a specific class for each anchor
$(".inline").colorbox({inline:true, width:"40%",href:"#inline_content"});
$(".inline1").colorbox({inline:true, width:"40%",href:"#inline_content1"});
$(".inline2").colorbox({inline:true, width:"40%",href:"#inline_content2"});
... etc

Colorbox IFrame opens a URL in the browser instead of a box

I used Colorbox in my aspx project and I used the Iframe from example 1. I copied the css and js files mentioned in the html page but when clicking on the link, it opens up the page in the browser itself whereas I want it to show up in the box like in the examples.
Here's the code -
<a class='iframe' href="#" onclick="$.colorbox({href:'http://wikipedia.com', iframe:true, width:'90%', height:'90%'});">Click here</a>
You need to render the colorbox in an element on the page:
<a class='iframe' href="#" onclick="$('#container').colorbox({href:'http://wikipedia.com', iframe:true, width:'90%', height:'90%'});">Click here</a>
<div id="container"></div>
You must instead do this -
Click me
<iframe id="frame1" src="your_default_src"></iframe>

Categories