dynamic data target bootstrap modal -Django

问题

I have a bunch of posts to show on a page. After clicking to read more, a bootstrap modal will come where the post will be showed. Also I am using django.

The thing is that I want to iterate through my queryset of all posts with a for loop.

My html looks like:

 {% for post in posts %}

   <!-- Modal -->
   <div class="modal fade" id="post1" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-body">         

             <!-- Button trigger modal -->

             <p> {{ post.content|truncatewords:10 }}  
             <a data-toggle="modal" data-target="#post1">Post 1</a></p>       

           </div>
         </div>
      </div>
    </div>
 {% endfor %}

As you can see, here, in the trigger for showing the modal, data-target="#post1" is there and in the modal, there is also id="post1".

Now it's okay for one modal. But I have like 10-12 blog posts. So I can't hardcode each of it's data-target. So what can I do? I don't know javascript, so a complete bootstrap solution maybe helpful. Nevertheless any solution or idea what can I do? Like post1 will get the id1 and then post2 should get the id2.

So can you please help me with this or give any other solution? It will be extremely helpful. I have tried this post: how to dynamically change bootstrap modal data-target click but that didn't help.

回答1:

So it was fairly simple, what I needed to do was to change the modal-target to #modal{{post.id}}" and the id of modal to modal{{post.id}} and voila!

来源：https://stackoverflow.com/questions/59844768/dynamic-data-target-bootstrap-modal-django

标签

javascript

html

django

twitter-bootstrap

bootstrap-modal