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.
Related
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
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');
});
I use jQuery textFill to fit some dynamic text (from a database) into a div with predefined width.
My problem is that this plugin works great on a page, but i want to use it inside a twitter bootstrap modal. This doesn't seem to work. I create an example in jsFiddle. I use a div outside of the modal and a div inside. The out-of-modal div works fine. The div inside seems to have some problems :)
<div id="out-of-modal"> <span>Lorem ipsum. Lorem ipsum.</span></div>
<div id="inside-modal"> <span>Lorem ipsum. Lorem ipsum.</span></div>
Here is the example in jsFiddle
Do you have any idea of what to do ?
The problem is with the css selector hide you used here, because it has property display:none with important rule
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
and causing not the modal to show, so remove it and also for transitioning effects use css selector fade if you like
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog">
SideNote: In your fiddle you are missing key div elements of modal e.g <div class="modal-dialog"> and <div class="modal-content">
<div class="modal-dialog">
<div class="modal-content">
//Modal Header, Body and Footer Comes Here
</div>
</div>
Working fiddle
I am really late to this thread, but I found a solution to this problem. In the actual script, there's at some point this code
var ourText = $(Opts.innerTag + ':visible:first', this);
which basically tells jquery to pick the first <span> element inside our <div> that is visible. However, our text is obviously not visible, because it's inside the modal when the page is started, so it's hidden. There's a simple fix to this. Just go inside the library and edit that part into this and it should work perfectly:
var ourText = $(Opts.innerTag + ':first', this);
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>
I'm using twitter bootstrap's modal window to load a remote image
<img alt="250x150" src="/assets/250x150.gif">
I'm following these docs
The image is not rendering correctly in the modal.
I get a load of jumbled data instead -
What's happening? How can I fix?
Yes, I had this too. The answer I found is here.
I created a link like this:
<a href="gallery/blue.jpg" class="thumbnail img_modal">
//handler for link
$('.img_modal').on('click', function(e) {
e.preventDefault();
$("#modal_img_target").attr("src", this);
$('#modal').modal('show');
});
//and modal code here
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Title to go here</h3>
</div>
<div class="modal-body">
<img id="modal_img_target">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
When using href to specify remote content for a modal, Bootstrap uses jQuery's load method to fetch the content, and then sticks the retrieved content into the modal's body element. In short, it only makes sense when the remote content (the href value) loads HTML or text.
What you're seeing is expected, as it's the same thing that would happen if you opened the gif file in a text editor, and just pasted it into an HTML tag.
To have it work the way you want, the href needs to point to an HTML document that contains an <img> tag that references the image you want in the modal.
In post of Mark Robson – change 'this' to 'this.href':
$("#modal_img_target").attr("src", this);
=>
$("#modal_img_target").attr("src", this.href);
(I don't have reputation for comment)