I am using bootstrap modals in project. In one page i have 2 containers that, one of them is inside the other one. The outer one has a modal trigger on click event and the inner one has a routing to another page. I can get modal popup if i click on outer container. That's okay but the problem is if i click the smaller container, modal triggered also before routing.
<div class="outer" data-toggle="modal" data-target="#exampleModal">
<a href="somewhere">
<div class="inner></div>
</a>
</div>
How can i prevent the pop up if i click the inner container.
I know i can cancel modal if i catch the hover event for inner container but i am looking more bootstrap way.
Changed your html a bit. I have put the link inside the inner div. Then using jquery you can stop propagation.
<div class="outer" data-toggle="modal" data-target="#exampleModal">
sadsdaddsads<br/>
asdsddsa<br/>
<div class="inner">asadds </div>
</div>
<script>
$(document).ready(function() {
$('.outer > .inner').click(function(e) {
//alert("inner div clicked");
e.stopPropagation();
});
});
</script>
Related
I have a web app where I use Bootstrap-popovers a number of times. These popovers contains HTML and are used to display small forms and such.
The idea is to "dim" the background with a black transparent overlay whenever a popover is shown in order to minimize distractions for the user.
I've gotten the basics down quite easily, but I really cannot get it to work as I want.
The desired functionality is: Whenever a button triggers a popover, the overlay should show in the background, covering the rest of the page.
When the popover is dismissed, either by it's save button, by it's cancel button or by a second click on the original trigger button, the overlay shall hide again.
This is my code:
HTML
<html>
<head>
// loading bootstrap.css
// loading main.css
// loading jquery.min.js
// loading bootstrap.min.js
// loading main.js
</head>
<body>
<div class="fadeMe" style="display:none"></div>
// ...lots of content
<div id="newReward" class="reward-markup edit-area">
<a href="#!" id="addRewardBtn" class="btn btn-primary trigger">
ADD REWARD
</a>
<div class="head hide">
<h4>NEW REWARD</h4>
</div>
<div class="content hide">
// ...small HTML-Form which works fine
<button class="btn btn-warning pull-left" onclick="$('.popover').popover('hide');">CANCEL</button>
<button class="btn btn-warning pull-right" onclick="addReward()">SAVE</button>
</div>
</div>
</body>
</html>
MAIN CSS
.fadeMe
{
opacity:0.7;
filter: alpha(opacity=20);
background-color:#000;
width:100%;
height:100%;
z-index:1;
top:0;
left:0;
position:fixed;
}
MAIN JS
$(function(){
$(".trigger").on('show.bs.popover', function(){
$("div.fadeMe").show();
});
$(".trigger").on('hidden.bs.popover', function(){
$("div.fadeMe").hide();
});
});
$('.reward-markup > .trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
},
container: 'body',
placement: 'bottom'
});
This is not working though. Triggering the popover brings out the overlay as it should, but dismissing the popover with the original triggerbutton leaves the overlay without hiding it, and thereafter wrecks the popover functionality alltogether (cancel button functions as it should). Strange thing is though, that if you supplement the jquery show/hide calls with simple alerts, the whole things works fine with trigger button showing alerts accordingly:
$(".trigger").on('show.bs.popover', function(){
alert('The popover is about to show.');
});
$(".trigger").on('hide.bs.popover', function(){
alert('The popover is now hidden.');
});
And even more strange: If you add both alerts and jquery-calls trigger button will show the first alert and then the overlay, but a second click on trigger button will not show second alert and overlay will not hide:
$(".trigger").on('show.bs.popover', function(){
alert('The popover is about to show.');
$("div.fadeMe").show();
});
$(".trigger").on('hide.bs.popover', function(){
alert('The popover is now hidden.');
$("div.fadeMe").hide();
});
Could someone please help me understand what's going on here? It drives me nuts!
i faced some kind of this before ... just for help if it works with you
in the cancel button instead of .('hide'); the popover ...
just try to click the original button again like below ...
<button class="btn btn-warning pull-left" onclick="$('.reward-markup > .trigger').click()">CANCEL</button>
I hope it helps
also check this fiddle .... if it helps
So I've been playing around with the in built popovers from bootstrap. I am pretty new to JS so please be kind!
I've managed to get multiple popovers to show and hide in the way I like but I would very much like them to follow the element that fires the popover when resizing the window and also for the first popover to load when a user loads the page.
I've searched on here and got the first one to show when loading but it doesn't hide when anything else is clicked.
Using
$(function () {
$("#popbadge1").popover('show');
});
my js
$(document).ready(function () {
$("#popbadge1").popover({
html : true,
content: function() {
return $('#hiddenpopbadge1').html();
},
});
$("#popbadge2").popover({
html : true,
content: function() {
return $('#hiddenpopbadge2').html();
},
});
$("#popbadge3").popover({
html : true,
content: function() {
return $('#hiddenpopbadge3').html();
},
});
});
my markup
<ul>
<li><a class="badge1" id="popbadge1" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">1</a></li>
<!-- Popover 1 hidden content -->
<div id="hiddenpopbadge1" style="display: none">
<h3>Content</h3>
</div>
<li><a class="badge2" id="popbadge2" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">2</a></li>
<!-- Popover 2 hidden content -->
<div id="hiddenpopbadge2" style="display: none">
<h3>Content 2</h3>
</div>
<li><a class="badge3" id="popbadge3" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">3</a></li>
<!-- Popover 3 hidden content -->
<div id="hiddenpopbadge3" style="display: none">
<h3>Content 3</h3>
</div>
</ul>
Ideally I would like the popover to follow the button that triggers it as well when the window is resized.
Anyone able to help?
For me, it's not clear what you mean by...
"I would very much like them to follow the element that fires the popover when resizing the window..."
However, getting the popover to show on page load is just a matter of putting your 1st code snippet inside the (document).ready().
And getting the popover to hide when anything else on the page is clicked is similar to this question, which works with something like this:
$(function () {
// When anything is clicked...
$('*').click(function (e) {
// Except popbadge1
if (e.target.attr != 'popbadge1') {
// Hide the popover
$("#popbadge1").popover('hide');
}
});
});
But there is something going on when you try to click back on the first link, where it won't open the popover. Possibly a conflict with Bootstrap, or something else I missed? Regardless, a simple check to see if the popover has been hidden once before solves it.
Here's the full solution at JSFiddle.
Thanks to grayspace for getting the popover to show one on load and in addition to his answer i set the first popover to focus and it seems to have fixed the slight glitch.
$(function() {
$("#popbadge1").focus();
});
https://jsfiddle.net/j4dut2ux/
Also you will see in the fiddle by displaying as an inline box and adding a div around the .a with relative and absolute positing accordingly the popover now follows its parent.
i have bootstrap Modal . and i have 3 images on it . what i want that when i click on any of this images change HTML of div.text , but its change all the div that take .text class i need change the html of the current div that i opened the modal . any help !!
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test111</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test2222</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test3333</div>
</div>
</div>
Jquery :
$("#img1").click(function(){
$(".text").html("Its woking")
});
I just made a Bootply with following code:
$("a[data-toggle='modal']").click(function(){
$("a[data-toggle='modal']").removeClass("active");
$(this).addClass("active");
});
$("#myModal img").click(function(){
$("a.active").next(".text").html("Its working");
});
When a Modal link is clicked, it sets the class active to the link that opened the modal. When an image in the modal is clicked, the text that should be changed can be identified as it's the text next to the active link.
The only adjustment of your markup was to add some example content inside the anchor tag - <a data-toggle="modal" data-target="#myModal">Modal</a> instead of <a data-toggle="modal" data-target="#myModal"></a>, otherwise it wouldn't be possible (at least for this example) to open the modal.
Just in case - the bootply already wraps the code in a $(document).ready(), so the above code has to be wrapped in
$(document).ready(function() {
// above code here
});
in order to work.
Update: As mentioned as comment, above approach doesn't work for the original markup because there the div with the class text is not next to the link, but there are other divs between them.
I've adjusted this in another Bootply with following code change:
$("#myModal img").click(function(){
$("a.active").closest(".Widget").find(".text").html("Its working");
});
When the image is clicked, closest() selects the closest parent of the active link and find() selects the child element with the class text.
Depending on the actual markup it's also possible to select closest(".press") instead of closest(".Widget") (both will work for this example), it's only necessary to select a parent container of the link and the text.
Because Bootply was sometimes down when I made these changes, I've added this also in a Fiddle without bootstrap, just as example for the functionality.
For reference: http://api.jquery.com/closest/
can not see where $('#img1') in the code your provided. But I guess what you need is $(this), something like:
$('.imgs').click(function(){
$(this).html()....
});
I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>
Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>
Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}
Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>
I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>
I'm developing a RhoMobile appand I've been having lot of trouble with page transitions.
At the end, I just decided to turn them off for a better user experience. Every button click works perfectly, except for one where I have a button inside a Collapsible element.
For the click event on the button not to get interpreted as a click on the collapsible, I use this js code, which I suspect is causing trouble:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
});
});
And in the HTML:
<div data-role="page" id="index">
Here go headers & navbar and other stuff
</div>
<div data-role="content">
<div data-role="collapsible-set" class="uurbon-block">
<div data-role="collapsible" data-collapsed="false">
<h3 data-position="inline"><p class='alignleft'>Collapsible title</p><div style="clear: both;"></div>
<span style="float:right;" class="button-span">
<a href="some_url.html" data-role="button" data-mini="true" data-inline='true' data-icon="star" data-iconpos="left" class="details" data-transition="none">
Button
</a>
</span>
</h3>
</div>
</div>
</div>
This will cause a blank page to be shown for 1-2 secs before transitioning. I'd be looking for a fix, but if not, i'd be happy with that page just beeing black (my app background is black also, so this blink wouldnt be so noticeable).
Note: I have alredy tried setting body background color in css, won't work.
Thanks for your ideas!
As pointed by Omar, if you want to put a button inside a collapsible and prevent the collapsible from capturing the click while also handling the page in the same browser, the correct way to do this is (Take notice that this may only apply to RhoMobile, but its worth a try on other jquerymobile-based frameworks):
and avoid RhoMobile trying to open this in a new browser is by using:
javascript:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
$.mobile.changePage("your_page");
});
});
HTML:
Button
Notice the href="javascript:;". I had this first set to "#" and also "", but that didn't work.