How to open all links in modal using Bootstrap - javascript

I'd like to be able to open all links on a page in a modal.
Below is an example:
Google AU
<a href-"http://google.com">Google US</a>
<a href="https://www.google.co.jp>Google JP</a>
I want these links to open a Bootstrap Modal iFrame, loading the href= website into the modal. We have hundreds of links on the home page (all within our own domain) that are currently opening in a new tab when clicked, but instead we want to be able to open them into a modal, similar to how MaterializeCSS does it:
<div aria-hidden="true" class="modal fade" id="rs1" role="dialog" tabindex="-1" style="display: none;">
<div class="modal-dialog modal-full">
<div class="modal-content">
<iframe class="iframe-seamless" src="https://google.com.au" title="Google AU"></iframe>
</div>
</div>
</div>
Without coding in all the modal <div id="unique"> these links would not work, so is it possible to use Javascript to automatically make all links on the page open into the modal?
Thanks

First you should create an empty modal, the content will be filled based on the link that is clicked. Following Javascript should help achieve this. I have not tested it but it should look something like this.
$('a').click(function() {
$('#myModal .modal-content').html('<iframe src="' + $(this).attr('href') + '"></iframe>');
$('#myModal').modal('show');
});

Related

Show a website on modal when button is clicked?

Im trying something which is kinda easy but im having some problems with it and i would like to get done it today.
I have a website page which has the following:
<button type="button" class="btn btn-primary btn1" data-toggle="modal" href="https://teespring.com/es/camiseta-gymsroka-deportiva?tsmac=store&tsmic=sroka-merchandising-2#pid=373&cid=100035&sid=front" data-target="#myModal" >Pedir ahora</button>
I have an eventListener with jQuery like this:
$('.btn1').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
});
so when the button is clicked it loads a modal and inside that modal it loads the wanted site on the href attribute, my modal coda btw is this:
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
Pretty easy modal. Well the problem it comes when i click the button, on chrome it works, it opens the modal and it loads the url correctly, but it says few errors on the console.log like this:
Invalid 'X-Frame-Options' header encountered when loading 'https://teespring.com/es/camisa-de-tirantes-gymsroka?tsmac=store&tsmic=sroka-merchandising-2#pid=408&cid=100232&sid=front': 'ALLOW-FROM https://www.facebook.com' is not a recognized directive. The header will be ignored.
in firefox it tells me the error but it doesn't load anything...
How i can fix this? If there is a possible fix or how you guys would have made this? My objective is to have few items on my website and "sell" them to the users, but the sell process is made by another company so its easier and cheaper for me. How i can do it? Thank you team!
That error occurs because the website you are trying to load inside the Iframe is denying access to load using http headers.
The website should allow that by configuring the X-Frame-Options header
You can read more here.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Bootstrap - Issue with Multiple Modals

i am trying to make a bootstrap website, and im having an issue with modals.
I can make the first one fine, but when i go to make the second one it just wont open?
the only linking tag i can see in the code is:
div class="modal fade" id="project-modal1" tabindex="-1" role="dialog" aria-labelledby="project-modal-label" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
And this is what i have on the image i want to link:
<a href="#" class="thumbnail" data-toggle="modal" data-target="#project-modal1">
<img src="img/port1.jpg" alt="">
</a>
is there abything im missing? as i said, one works fine, but when i add a second and change the "id" it wont load?
I have an internal site at work using bootstrap modals and on my a elements I have the href set as href="#project-modal1" and don't event have a data-target attribute and it works great.

Twitter bootstrap 3 modal open on page load without effect

I have a authentication page which use the modal to display the form.
If login/password are correct, users got redirected to a SPA.
If they are not correct, I'll need to show the exact same page with the login form open and an error message.
Is there a way to show a view with the twitter bootstrap already open, no effect/delay.
I also need to have the data-dismiss button act like he is supposed to.
Here is a jsfiddle : http://jsfiddle.net/3kgbG/267/
// no black overlay, dismiss not binded
Here's a fiddle where it automatically opens - fiddle
Pulled that right from the Bootstrap site - Bootstrap Modals
$('#myModal').modal('show');
For a pure HTML approach:
The wrapper for the modal has a class fade. This class is what provides the animation, so not adding the class will cause the modal to just appear.
You can then add data-show="true" so that the modal opens when it is initialized.
$( document ).ready(function() {
$('#myModal').modal({
//options for modal
})
});
This will open your modal on document ready. Check out any additional options here
To remove the fade effect you have to remove it from the modal wrapper class:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
Becomes
<div class="modal bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

bootstrap modal within nav tab

I've placed a button to activate a 'twitter bootstrap modal' on the 3rd tab within a 'navtab'. When the modal button is clicked there is a short delay then the 1st tab of the navtab is set to active. At no point is the modal visible.
My assumption is that the modal defaults to the first tab and that when the tab changes from tab 3 to tab 1 an event is fired that causes the modal to close.
Which leads me to the question: how can I set the modal to activate on tab n rather than tab 1?
Am I completely wrong about what is happening here? Any help would be appreciated. Thank you
<button class="btn btn-primary" id="tester">Detailed</button>
<div class="modal fade bs-example-modal-sm" id="mymod" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
<script type="text/javascript">
$(document).on('click', '#tester', function(){
$("#mymod").modal('show');
});
</script>
My problem was that I didn't have the proper javascript library loaded for bootstrap.
Adding bootstrap-modal.js to my static assets solved my problem.

Bootstrap Modal Overlaps Menu

I just attached a bootstrap modal to a button on a Wordpress site, and it's working great.
But the problem is, the modal hides the navigation menu (specifically the "blog" link) when it's inactive, the first time. After you open the modal and close it out, the modal disappears and the menu works fine.
I've tried a few things, like fiddling with the z-index, and also I tried hacking a script together:
<script>
jQuery(document).ready(function() {
jQuery('#subscribe').modal('hide')
});
</script>
So far, no dice. But maybe you can tell from the script, I'd just like to put the modal on hidden state when the page loads, and only have it called when they click the button.
Here's my site. If you try clicking on the "blog" link on a laptop or smaller screen, you can't, because it's hidden by the modal:
http://jackalopemedia.com/jasontreu
Appreciate any help!
Ok I found the solution
You must add a class called hide. Because fade function is to set opacity:0 of the div. So its just hide in-front of the page.
So your line should be
<div id="subscribe" class="modal hide fade" role="dialog">
For more details visit bootstrap
Compare Your Modal With This, If Your Code Match With This, It Should Be Working.
<div class="modal fade hide" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2>Title</h2>
</div>
<div class="modal-body">
<span>body</span>
</div>
<div class="modal-footer">
<span id="spanbtnclode" > <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></span>
</div>
</div>
</div>
</div>

Categories

Resources