javascript - Bootstrap Multiple Modal Buttons - Stack Overflow

admin管理员组

文章数量:1312782

I have four grids, and in each grid I have a button that I would like to have its own unique modal. Whenever I try using Bootstrap's modals' however, I am only getting the first button's data to show up, even though I may be clicking on a different button that should display a different modal.

I'm using modals for the first time, so I'm going directly based off the examples in Bootstrap's website. I have the following code being replicated four times with the only difference being the name of the button, the modal title, and the modal body. Can anyone tell me what I need to change in order to have four unique modals in the same page?

<div class="col-md-3">
        <div class="head">
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Button1</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">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">First Log</h4>
                        </div>
                        <div class="modal-body">
                            Test
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mediumSpacer"></div>
    </div>

I have four grids, and in each grid I have a button that I would like to have its own unique modal. Whenever I try using Bootstrap's modals' however, I am only getting the first button's data to show up, even though I may be clicking on a different button that should display a different modal.

I'm using modals for the first time, so I'm going directly based off the examples in Bootstrap's website. I have the following code being replicated four times with the only difference being the name of the button, the modal title, and the modal body. Can anyone tell me what I need to change in order to have four unique modals in the same page?

<div class="col-md-3">
        <div class="head">
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Button1</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">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">First Log</h4>
                        </div>
                        <div class="modal-body">
                            Test
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mediumSpacer"></div>
    </div>

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow asked Feb 1, 2015 at 3:31 ValrokValrok 1,58488 gold badges3232 silver badges5050 bronze badges 1

• just change the data-target in the button to match up with the id in the Modal – erickeno Commented Feb 1, 2015 at 3:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Each modal should have a different id, the data-target for each button should be the id of each modal.

Example:

 <div id="myModal1"class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                        <div class="modal-header">....</div>
                        <div class="modal-body">...</div>
                        <div class="modal-footer">...</div>
                </div>
            </div>
 </div>
 <div id="myModal2"class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                        <div class="modal-header">....</div>
                        <div class="modal-body">...</div>
                        <div class="modal-footer">...</div>
                </div>
            </div>
 </div>

Each button should be something like:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Button1</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Button1</button>

本文标签： javascriptBootstrap Multiple Modal ButtonsStack Overflow