How to open one Bootstrap modal on multiple buttons on the same page?

Question

I am trying to open a single modal on multiple buttons on the same page. Unfortunately I can't figure out a way to do so.

I want to have multiple signup option the same page which open up a modal and a user can fill out the form on the modal and signup..

With the current code the modal works on the first button but doesn't work on the other buttons on the page. :(

Can anyone tell me a solution to this?

Here is my code

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupModal">
Create an account
</button>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupModal">
    Sign Up Here
</button>


<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="row">
            <div class="col-sm-6 text-center col-xs-height">
                <div class="signup-popup">
                    <h4>Signup Now</h4>

                    <input class="col-xs-12" type="text" name="username" placeholder="Email Address">
                    <input class="col-xs-12" type="password" name="password" placeholder="Password">
                    <input class="col-xs-12" type="password" name="confirmPassword" placeholder="Confirm Password">
                    <input class="btn btn-primary btn-filled col-xs-12" type="submit" value="Submit">
                </div>
            </div>

            <div class="col-sm-6 col-xs-height">
                <div class="signup-facebook">
                    <div class="signup-facebook-container">
                        <a class="btn btn-block btn-social btn-facebook signup-facebook-btn" href="#">
                        <i class="fa fa-facebook"></i> | Signup with Facebook
                        </a>
                    </div>

                </div>

            </div>
        </div>
      </div>

    </div>
  </div>
</div>

Thanks in Advance!

Solution

make sure bootstrap js, bootstrap css and jquery is added.Solution of your problem. jsfiddle example. Please have a look JSFIDDLE example.

Create an account

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupModal">
    Sign Up Here
</button>


<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="row">
            <div class="col-sm-6 text-center col-xs-height">
                <div class="signup-popup">
                    <h4>Signup Now</h4>

                    <input class="col-xs-12" type="text" name="username" placeholder="Email Address">
                    <input class="col-xs-12" type="password" name="password" placeholder="Password">
                    <input class="col-xs-12" type="password" name="confirmPassword" placeholder="Confirm Password">
                    <input class="btn btn-primary btn-filled col-xs-12" type="submit" value="Submit">
                </div>
            </div>

            <div class="col-sm-6 col-xs-height">
                <div class="signup-facebook">
                    <div class="signup-facebook-container">
                        <a class="btn btn-block btn-social btn-facebook signup-facebook-btn" href="#">
                        <i class="fa fa-facebook"></i> | Signup with Facebook
                        </a>
                    </div>

                </div>

            </div>
        </div>
      </div>

    </div>
  </div>
</div>

Comments

[Joystan Fernandes]

Thanks @Umair, I have one more problem now. the modal opens up but then as my second button is below the fold of the screen the modal opens up on top itself. doesn't open up the the button is located. I tried giving it some css .modal-dialog { position: fixed; left: 25%; top:25%;} but didn't work out :( Is there any fix you suggest?

[Umair]

@JoystanFernandes, Please clarify your problem statement. you want modal settings css?

[Umair]

@JoystanFernandes, Please have a look. i have set MODAL. jsfiddle.net/d36hvudb/2

[Joystan Fernandes]

I have placed the first button in the header section while the second right at the bottom of the page. Now if I scroll down to the bottom of the page and click on the second button the modal opens up at the top where the first button is placed. Though the modal has position:fixed it doesn't open where the second button is placed

[Umair]

@JoystanFernandes, Please check this fiddle. jsfiddle.net/umairb3/d36hvudb/4