I have 2 buttons and each is responsible for opening a modal, however, this modal has 2 tabs for signup and sign in. I want that if a user clicks on signup button then after the modal opens the signup tab should be active and if a user clicks on sign in button then after the modal opens the sign in tab should be active
The code of the button is
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">SIGN UP</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-lg_two">SIGN IN</button>
The code of modal is
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs" >
<li class="nav-item col ">
<a class="nav-link active" href="#signup" data-toggle="tab" >Sign up</a>
</li>
<li class="nav-item col ">
<a class="nav-link" href="#signin" data-toggle="tab" >Sign in</a>
</li>
</ul>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="tab-content">
<div class="tab-pane active" id="signup">
signup box
</div>
<div class="tab-pane" id="signin">
signin box
</div>
</div>
</div>
<div class="col" id="social" >
Content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Can anyone please tell me how to do this
You'll have to do it with Javascript. Here's one way. Working JSFiddle.
First, get rid of the data-toggle="modal" data-target=".bd-example-modal-lg" on both buttons. You'll need to run your tab-targeting Javascript when you open the modal, and you can easily do that if you manually open the modal using the modal show method, rather than via the data attributes.
Next, in their place, add something to each button to identify which tab it targets - for eg a data attribute, with the id of your tabs:
<button type="button" class="btn btn-primary" data-tab="signup">SIGN UP</button>
Last, add some Javascript to do the work:
// Add an event handler to fire when our buttons are clicked
$('button').on('click', function() {
// Find which button was clicked, so we know which tab to target
var tabTarget = $(this).data('tab');
// Manually show the modal, since we are not doing it via data-toggle now
$('.bd-example-modal-lg').modal('show');
// Now show the selected tab
$('.nav-tabs a[href="#' + tabTarget + '"]').tab('show');
});
Note that as the docs describe, you target the tab with the a link which opens it, not the div of the tab itself.
Related
My code like this :
<div class="container">
<h1 class="display-4 text-center mb-4">Bootstrap Modals</h1>
<div class="row mb-4">
<div class="col text-center">
<h3>The Basic Modal</h3>
<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal" data-backdrop="false" data-keyboard="true" >Click to open Modal</a>
</div>
</div>
</div>
<br/><br/><br/><br/>
<div class="form-group">
<label for="exampleFormControlTextarea1">Input data</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"> </textarea>
</div>
<!-- basic modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Demo and full code like this : https://codepen.io/trendingnews/pen/BayQLrm?editors=1010
I set data-backdrop="false" to remove backdrop
but it makes me unable to click on something. I have to click the close button on the modal to close on the modal.
how do I make it when I click on any element outside of modal, the modal automatically closed?
for example, I click textarea or other elements, the modal is automatically closed
As an extension to my comment, adding as an answer for anyone else that comes across this.
Problem:
You want to use a bootstrap modal, with no backdrop, and have the functionality that clicking away from the modal closes it.
Challenge:
The bootstrap modal backdrop has a listener on it so when clicked, it closes the modal. However, if there's no backdrop, then this cannot happen.
Solution:
Use a backdrop as normal but set it's color to transparent. Set the css background-color property on the backdrop e.g.
.modal-backdrop { background-color: transparent; }
These code works fine, but is repeating the same over and over, needs to refact.
The elements presented on page are Title and Description of all Modal. Rest
of functionality is the same. Css is default bootstrap, it can be the same
whithout any important change.
I added another Help button on the side of each primary button, to help
search some information about how to find the documentation on every element
inside the Modals. Is no needed to focus on that at the moment.
Lorem ipsum text, can be placed on the respective container to complete
the description, and title, feel free to do it by your own.
To test the code, link Bootstrap 4.0 js files on the page.
So some guide to refact here, will be apreciated. Thank you very much.
<!-- DESCRIPTION & HELP BUTTONS-->
<ul>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
<button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
</a></li>
</br>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-2" data-whatever="2. First Content">Title 2</button>
<button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
</a></li>
</ul>
</div>
</div>
<!-- END DESCRIPTION & HELP BUTTONS-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text Description 1</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Title 2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text Description 2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
$('#example-1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
} // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(recipient)
modal.find('.modal-body p').text(recipient)
})
$('#example-2').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
} // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(recipient)
modal.find('.modal-body p').text(recipient)
})
I created a single modal in which the information can be replaced according to the button that clicked it. To take care of a longer text for modal body part, I added a that contains the relevant text along with the button in the same li but keeping the same hidden. So on click of the modal lonk all the relevant values can be replaced using jquery like this.
<!-- DESCRIPTION & HELP BUTTONS-->
<ul>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
<button type="button" class="btn btn-secondary btn-circle" title="Information regarding first modal or...">?<i></i></button>
<div id="1content" style="visibility: hidden;"> <p>Some text Description 1</p></div>
</a></li>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="2. Second Content">Title 2</button>
<button type="button" class="btn btn-secondary btn-circle" title="Information regarding second modal or...">?<i></i></button>
<div id="2content" style="visibility: hidden;"> <p>Some text Description 2</p></div>
</a></li>
</ul>
<!-- END DESCRIPTION & HELP BUTTONS-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
<script>
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var button = $(this); // Button that triggered the modal
var recipient = $(this).attr("data-whatever");
var modal = $("#example-1");
modal.find('.modal-title').text(recipient);
var div = $( "div" );
// if last() is not used, then it brings that information button's ? as well
var bodyText = $(this).siblings(div).last().text();
modal.find('.modal-body p').text(bodyText);
});
</script>
i have many download links. i want to open the same modal after clicking each download link. I achieved this for a single download by creating two links, one for the modal and one for the download, hiding the download link and then triggerring the click event on it when the modal link is clicked. the only problem is that it isnt working for multiple download links. I tried using different ids on the links for each file and triggering each dwnload from a seperate modal link but it isnt working.
<ul class="list-group">
<li class="list-group-item">2016
<a class="pull-right" href="#" data-toggle="modal" data-target="#myModal" rel="nofollow" download id="modal1"><i class='fa fa-download'>Download</i></a>
aa</li>
<li class="list-group-item">2015
<a class="pull-right" href="#" data-toggle="modal" data-target="#myModal" rel="nofollow" download id="modal2"><i class='fa fa-download'>Download</i></a>
aa</li>
</ul>
those are the links. this is the modal;
div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Your download will begin shortly...</h4>
</div>
<div class="modal-body">
this is the modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
this is the javascript
$('[data-toggle=modal]').on('click', function(e) {
var $target = $($(this).data('target'));
$target.data('triggered', true);
setTimeout(function() {
if ($target.data('triggered')) {
$target.modal('show').data('triggered', false);
};
}, 1000); // milliseconds
return false;
});
$('#modal1').click(function(){
$('#download1').trigger('click');
});
$('#modal2').click(function(){
$('#download2').trigger('click');
});
please what is wrong?
I have a modal with some tabs, and each tab has its own form. I am looking for some way to change the footer so the submit works based on the active tab.
http://jsfiddle.net/r9b3ugs5/
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
One
</li>
<li>
Two
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="One">
<form id="FormOne" role="form" class="container-fluid" action="One.asp" method="post">
<div class="row">
FormOne
</div>
</form>
</div>
<div class="tab-pane" id="Two">
<form id="FormTwo" role="form" class="container-fluid" action="Two.asp" method="post">
<div class="row">
FormTwo
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
What should be the way to do this? adding one footer for each tab and show it when the tab is active? Some other way?
UPDATE:
http://jsfiddle.net/r9b3ugs5/2/
Everthing is ok, besides the trigger url when I click in each button.
use jquery:
$("#tab1").click(function(){
$("#submit1").css("display","inline-block !important");
$("#submit2").css("display","none");
});
$("#tab2").click(function(){
$("#submit2").css("display","inline-block !important");
$("#submit1").css("display","none");
});
Fiddle: Demo
I updated the JFiddle. Look at this:
http://jsfiddle.net/r9b3ugs5/1/
Instead of alerting the id you can decide which tab has to be saved using the retrieved id. All you need to do is to add an id and a unique class (mytabs here) to all the tabs (on the li tag).
$("#save-button").click(function() {
alert($(".mytabs.active")[0].id);
});
EDIT: Actually you don't really need the class you could select over the parent ("#my-tab-ul li.active"). Several possibilities.
EDIT2: Further explanation
give the form ids like tab-id-form (tab-id = id of tab belonging to form)
replace the alert line with
$("#" + $(".mytabs.active")[0].id + "-form").submit();
Complete solution (tested in IE and FF): http://jsfiddle.net/r9b3ugs5/5/
// optional: change the text on the button when the tab is switched
$("#tab1").click(function() {
$("#save-button").html("Submit 1");
});
$("#tab2").click(function() {
$("#save-button").html("Submit 2");
});
$("#save-button").click(function() {
var id = $(".mytabs.active")[0].id;
if (id == "tab1") {
// you can also do the submits here, then there is no need for a
// special id, e.g. $("#completely-unrelated-form-id").submit()
} else {
// other submit if done in here, however with this approach you
// always have to modify the code when adding tabs.
}
$("#" + id + "-form").submit(); // == EDIT2, no more code manipulation needed
});
When I clicked on the product, it opened the Modal and added to the My product list but I want that particular product to get faded if it is added to the My Product list and the button also when the modal is reopened so that it could not be added again to list.
<script type="text/javascript"> <!--This is the code what i'm able to do so far-->
$(document).ready(function() {
$('button[id^="allttm"]').click(function(e) {
e.preventDefault();
var $this = $(this);
var data_id = $this.attr('data-id');
$("#mylist").append('<li class="has-item">' + data_id + '</li>');
});
});
</script>
<ul class="unstyled" id="products">
<li class="dummycontent" id="itemdetail" data-id="6425809">
<a class="dummyclass" href="javascript:void(0)" id="" data-toggle="modal" data-target="#basicModal">
<span class="itemname">product 1</span>
</a>
</li>
</ul>
<h3 id="myproductlistheader">My productlist</h3>
<ol id="mylist" class="productlist">
</ol>
This the modal area:
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="procuctifo">
<div>
<h3 class="productheading">product 1</h3>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal" id="allttm_1" data-id="product 1">Add to list</button>
</div>
</div>
</div>
</div>
you can add another class to your product item once it has been added to the list and based on whether the product items has the class or not you can add it to the list.your code may look something like this:
$('.products').click(function(){
if($(this).hasClass('added')){
//product in the list , no need to add
}else{
// add class and add product to list
$(this).addClass('added');
//add product to list
}
});
Hope it helps