renat natanael renat natanael - 5 months ago 30
jQuery Question

use same class for data target modal in same page

im have a profile list page. inside the page it have modal with data-target .popupmessage. the problem is i will using the same class as much as the profile i have. how to make specific when client press the modal? because when i click the button modal to show the modal, all the modal got show up

<div class="col-xs-3">
<div class="profile thumbnail">
<img src="http://placehold.it/450x150">

<button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage">
Message
</button>
<div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" aria-hidden="true"></span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-xs-3">
<div class="profile thumbnail">
<img src="http://placehold.it/450x150">

<button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage">
Message
</button>
<div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" aria-hidden="true"></span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>


heres the example
http://www.bootply.com/95vPZK1rN8

i want to add a number at the end of .popUpMessage
so like a looping every .popUpMessage will be like this .popUpMessage1, .popUpMessage2, .popUpMessage3, .popUpMessage. but i kindly stuck.
heres the script

var start=1;
var max=9999;

for(start;start<=max;start++){
//i stuck on the condition
}

Answer

As far as I know, Bootstrap doesn't support multiple modals in this way. Every data-target property has to point out to a specific and unique modal. Else (and that's what your problem right now is), Bootstrap will simply show up all of them.

A simple approach could look like this, by just renaming your individual data-target and container class to popUpMessage(x, y, z).

That being said, you've also mentioned you're affraid of having too many classes. In this case, you may use some JavaScript magic and define your classes dynamically after loading up your page.

EDIT: Since you are using Bootstrap, you can also make use of jQuery and it's .each() function. By doing so, you can iterate through every element (specified through your selector) and change it's attributes like data-target and class.

Take a look into this.