Question

Im working in twitter-bootstrap3.On click of button "mybtn", the modal with id="myModal" should pop and on click of button "mybtn2", the modal with id="myModal2" should pop. But when I click on any of the two buttons , bot of them popup.What should I do?

Sign In/Up

<button id="mybtn2"  style="display:none;" 
    class="btn btn-primary btn-lg" href="#signup" data-toggle="modal" data-target=".bs-modal-sm">
      Sign In/Up
  </button>

<div class="modal fade bs-modal-sm" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" >
//code
</div></div>

<div class="modal fade bs-modal-sm" id="myModal2"  tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" >
//code
</div></div>
Was it helpful?

Solution

Add the ID of the modal you want to target. Right now, your data-target attributes are pointing to the class of bs-modal-sm which applies to BOTH of your modals. Try data-target="#myModal" or data-target="#myModal2" as appropriate.

Here's a bootply demo: link

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top