I am using an iframe to display a page in the same domain and I would like to inject a bootstrap popover inside the iframe: is there a way of doing it?
I am currently trying:
Javascript:
var iframe = $('#editor-iframe');
iframe.load(function (){
var contents = iframe.contents();
var element = contents.find('a');
element.popover();
});
HTML (partial content from the iframe):
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button"
data-toggle="popover" data-trigger="focus" title="Dismissible popover"
data-content="And here's some amazing content.
It's very engaging. Right?">Dismissible popover</a>
I try to click on the a element, but nothing happens and no error messages are given. It works fine outside of the iframe, but I don't know why it does not work on the iframe. Any help is appreciated.
Related
I am trying to display content when hovering over an icon.
When I hardcode it in my HTML it works fine.
But when I try to render the same thing through javascript, nothing happens on hover.
So this works when written in HTML directly:
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
data-content="hello"i>
This does not work
<!--html-->
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
i>
<!--javascript-->
document.getElementById("iconid").setAttribute("data-content", "hello");
When I inspect the rendered code, everthing seems exactly the same in both cases, but in 2nd case nothing happens on hover.
Thanks for any help!
If you use bootstrap, you might want to call popover event manually after manipulating element by JS.
$('[data-toggle="popover"]').popover()
I think issue is, by the time you call your JS manipulation, bootstrap already finished binding events for the elements. So it got left behind.
I have already finished the code on the page by the way mysite.ru / jqueryform-75cb32 / form.html
How to make it open in the modal window at mysite.ru/report.html on the button
<a class="btn btn-info btn-sm pull-right act_popup_dota" data-toggle="modal" data-target="#modal_dota2">
Leave a vacancy
</a>
https://pastebin.com/5z0y8yBg
$('#modal_dota2').on('shown.bs.modal',function(){ //correct here use 'shown.bs.modal' event which comes in bootstrap3
$(this).find('iframe').attr('src','http://mysite.ru/jqueryform-75cb32/form.htm');
})
I want to go through the code of advanced popup window just like godaddy's popup (see the picture)
I got following code but it's very simple.
<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
</head>
<body>
<a href="#" onclick="MM_openBrWindow('popup.html','','scrollbars=yes,width=700,height=700')">click me
</a>
For pure educational purposes only, I tried to grab the javascript files and html files for this popup window. But couldn't do it via firebug or any other site grabber. Can someone make or grab the files and post a sample code please which will show a popup exactly as the popup shown in the picture for educational purposes. And the background should be blurred like in the picture.
I know html, but have very little knowledge about javascript/jquery.
P.S : The link to the popup window https://sg.godaddy.com/ and the the clickable text is "* View product limitations and legal policies" and location of the clickable text is bottom of the page.
Regards
simply place the button to text . try it works..!
http://www.w3schools.com/bootstrap/bootstrap_modal.asp
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
to
<span type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</span>
I have multiple bootstrap popovers and I'm trying to re-size them as needed with a JS.
Everything works if I have only one of these re-size functions and only the one clicked first will work. I tried to merge them, rename them with ID or class and nothing works for me.
my buttons
<a role="button"
class="btn-default a"
data-container="body"
data-toggle="popover"
data-placement="left"
id="a">Button A</a>
<a role="button"
class="btn-default b"
data-container="body"
data-toggle="popover"
data-placement="bottom"
id="b">Button B</a>
Any way to have multiple of these alongside?
// button class a
var p = $('#a').popover();
p.on("show.bs.popover", function(e) {
p.data()["bs.popover"].$tip.css("max-width", "300px");
});
// button class b
var p = $('#b').popover();
p.on("show.bs.popover", function(e) {
p.data()["bs.popover"].$tip.css("max-width", "500px");
});
BTW I have also tried to control the size of these popovers with CSS styles without any luck.
I'm using bootstrap in my project. I would like to use popover inside of modal window, but popover's title look like this:
Here is code I have inside of modal:
<button id="popover-test-in-modal" type="button" class="btn btn-primary"
data-toggle="popover" title="Test for popover"
data-content="And here's some amazing content. Testing popover.">Popover
</button>
<script>
$("#popover-test-in-modal").popover();
</script>
Here is jsFiddle: http://jsfiddle.net/7k5mjw24/
How can I fix it?