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
Related
We have a scenario whereby when particular buttons on our website are clicked the processing takes 10 seconds or so - unfortunately there's not much we can do about this in the short-term because it's the time it takes to write data up to Dynamics CRM.
As a short-term solution, we wanted to show a bootstrap modal alerting the user that something is still happening..i.e. it's processing. We thought we would show the modal after about 1 or 2 seconds, that way if the process finished quickly the user wouldnt even see the modal, if it was slow they would.
So, we start with a button in our HTML:
<input type="submit" value="Continue" class="link-button large-plus-link-button primary" data-toggle-processing-modal="true"/>
Under which is the modal itself:
<div id="processingModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-blogpost-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
Loading...
</div>
</div>
</div>
Then we have a javascript function to show the modal:
$("[data-toggle-processing-modal='true']").on('click', function(e) {
setTimeout(function () {
$('#processingModal').modal('show');
}, 1000);
})
This works in all desktop browsers that we've tested so far, and mobile versions of Android, however the modal doesnt show at all on IOS devices. I believe it is something to do with the fact that the page has started submitting and the reason I think this is because if I prevent the page from submitting by adding e.preventDefault() within the javascript function, it works! BUT, the page doesn't get submitted of course!
I've racked my brains, but I can't seem to think of a way around this - can anyone suggest any ideas?
Thanks in advance
Kind regards,
dotdev
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 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.
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)