I have a Bootstrap Model working fine, except that it is visible when the document loads and I can't work out how to make the initial state invisible?
Launch demo modal
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Following documentation, add hide class to the modal.
<div class="modal hide fade">
...
</div>
Turns out simply adding style="display: none" to the modal outer div did the trick.
Related
when i clikc on django title i get django post and when i click on javascript title i get django post ether am not using any frame_work and this my blog page i really try every solution i know but Unfortunately nothing happend
And here an image
blog.html
{% for blog in blogs %}
<div class="col-xl-12 col-md-6 col-xs-12 blog">
<div class="right-text-content">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<h2 class="sub-heading">{{blog.title|title}}</h2>
</button>
<!-- Modal -->
<div class="modal fade align-self-end mr-3 " id="myModal" tabindex="1" role="dialog"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{blog.title|title}}</h5>
<h6 class="float-right">{{blog.created_at}}</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{blog.content|linebreaks}}
</div>
<div class="modal-footer">
<h5>Created by {{blog.name}}</h5>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p>
<br>
<a rel="nofollow noopener" href="{{blog.name_url}}" target="_parent">{{blog.name}}</a>
<br>
{{blog.content|linebreaks}}
</p>
{{blog.created_at}}
</div>
</div>
{% endfor %}
views.py
from django.shortcuts import render
from .models import DigitalTeam, Blog
def index(request):
pers = DigitalTeam.objects.all()
return render(request, 'index.html', {'pers':pers})
def blog(request):
pers = DigitalTeam.objects.all()
blogs = Blog.objects.all()
return render(request, 'blog.html', {'pers':pers, 'blogs':blogs})
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('blog', views.blog, name='blog'),
]
So guys what am i missing
To get individual blog details in the modal you need to pass the blog id to the modal as a prop.
It can be done by adding blog.id in the button data-target prop and receive the blog.id in modal id prop.
the solution in given below,
{% for blog in blogs %}
<div class="col-xl-12 col-md-6 col-xs-12 blog">
<div class="right-text-content">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal{{blog.id}}">
<h2 class="sub-heading">{{blog.title|title}}</h2>
</button>
<!-- Modal -->
<div class="modal fade align-self-end mr-3 " id="myModal{{blog.id}}" tabindex="1" role="dialog"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{blog.title|title}}</h5>
<h6 class="float-right">{{blog.created_at}}</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{blog.content|linebreaks}}
</div>
<div class="modal-footer">
<h5>Created by {{blog.name}}</h5>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p>
<br>
<a rel="nofollow noopener" href="{{blog.name_url}}" target="_parent">{{blog.name}}</a>
<br>
{{blog.content|linebreaks}}
</p>
{{blog.created_at}}
</div>
</div>
{% endfor %}
I am using bootstrap modal in my flask blog where is put the bootstrap modal inside the {% for blog in blogs %} section where I pass the {{blog.id}} in my modal.
But every modal is showing the same first {{blog.id}} (for ex. 1 in every modal) where every modal should have the id of it's respective blog.
Here is the code -
{% for blog in blogs %}
<div class="col-md-12">
<div class="mu-blog-area">
<!-- Title -->
<div class="row">
<div class="col-md-8">
<h1 class="mu-blog-item-title">{{blog.title}}</h1>
<p>{{blog.body}}</p>
<form action="/blog_detail/{{blog.id}}" method="post">
<button class="mu-blg-readmore-btn" type="submit">Read more <i class="fa fa-long-arrow-right"></i></button>
</form>
<div class="mu-blog-navigation">
<button class="mu-blog-nav-btn mu-blog-nav-prev ><span class="fa fa-trash-o"></span>Delete Post</button>
<button class="mu-blog-nav-btn mu-blog-nav-next" data-toggle="modal" data-target="#exampleModalCenter" >Edit Post<span class="fa fa-edit"></span></button>
</div>
</div>
<!-- Blog Navigation -->
</article>
<!-- End single item -->
</div>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Warning! READ THIS</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
If you edit this post then your media content of this blog (photos, videos & audio) will be deleted automaticlly.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form action="/edit_blog/{{blog.id}}" method="post">
<h1>{{blog.id}}</h1>
<button type="submit" class="btn btn-primary">Yes I will edit</button>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
What is going wrong here?
I should have to give different id to every modal so that every blog modal trigger button can access it's own modal.
I should replace the trigger button code like this -
<button class="mu-blog-nav-btn mu-blog-nav-next" data-toggle="modal" data-target="#{{blog.id}}exampleModalCenter" >Edit Post<span class="fa fa-edit"></span></button>
And the modal id like this -
<div class="modal fade" id="{{blog.id}}exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
That's a very simple solution. You have to make the id to be unique for every modal.
That's it.
I want to display data in the popup, I have a list on products but when a user clicks on the product id then it should be open in popup according to that product id.
here is my views.py file...
def myview(request):
datas=TestForm.objects.all
template_name='test.html'
context={'datas':datas}
return render(request, template_name, context)
def myview(request, id):
display=TestForm.objects.get(pk=id)
template_name='test.html'
context={'display':display}
return render(request, template_name, context)
here is my test.html file...
{% for a in datas %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#exampleModal">
{{a.product_id}}
</button>
{% endfor %}
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<tr>
<td>{{datas.name}}</td>
<td>{{datas.price}}</td>
<td>{{datas.category}}</td>
</tr>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
Currently, it's displaying the only popup fields on click all products id's, Please let me know how it can display product data according to click product id.
You can solve this issue by making the modal id attribute unique with the pk value.
{% for a in datas %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#exampleModal{{a.pk}}">
{{a.product_id}}
</button>
{% endfor %}
Now in the modal
{% for a in datas %}
<div class="modal fade" id="exampleModal{{a.pk}}" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
.......
{% endfor %}
This is the footer code:
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="employee_update_btn" type="submit" class="btn btn-success btn-round ">Update</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
{% if success %}
<script>
$('#employee.employee_id_{{ employee.employee_id }}').show();
</script>
{% endif %}
</script>
</form>
I wanted to open the modal after clicking the Update button.
views.py
return render(request, 'index.html', context={'success': True})
the Modal i wanted to open:
<div class="modal fade" id="employee.employee_id_{{ employee.employee_id }}" tabindex="-1" role="dialog" style="display: none; overflow: auto;" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="card">
<div class="modal-content">
<div class="modal-header">
<div class="card-header-success" >
<h4 align="center" class="card-title">EMPLOYEE PROFILE</h4>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
your {% if success %}... will break your code inserting a <script> tag inside another.
Anyway, to accomplish what you want, the following should do the trick.
$("#employee_update_btn").click(function (e){
e.preventDefault(); // Prevent default submit action
// show the modal
$("#employee_employee_id_{{ employee.employee_id }}").show();
});`
Note that I've changed your modal ID getting rid of the dot in it since it will break the selector, update your html as follows
<div class="modal fade" id="employee_employee_id_{{ employee.employee_id }}" tabindex="-1" role="dialog" style="display: none; overflow: auto;" aria-hidden="true" data-backdrop="static">
[...]
If you are using bootstrap as a css framework, keep in mind that you should init the modal before interacting with it.
I have a for loop creating my main home page cards , i have 3 models
Image ,title and body
the idea is to get the specific info for each card that I'm pressing on his "view " button .
I'be been using django with python , and I'm trying to make like a news website where you see the title on the cards on the home page and when you click them you get a scroll bar with the full info about the arctical ,
the problem is that because I'm looping trough the database to get all the cards , when I press on the "View" button doesn't mattet which one I get the body of the text that Is last on the List.
<div class="row">
{%for job in jobs.all%}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class ="card-img-top" src ="{{job.image.url}}" />
<div class="card-body">
<p class="card-text">{{job.title}}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModalScrollable"
>
View
</button>
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Full artical</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{job.body}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{%endfor%}
</div>
You are producing multiple nodes that all have ID exampleModalScrollable, which is not quite legal. Not sure which front-end library you're depending on, but I believe you want to have the data-target in the button align with the id of the modal for each item. The easiest is to use the model's ID; something like:
<button type="button" class="btn btn-outline-primary" data-toggle="modal"
data-target="#job-modal-{{job.id}}">
and
<div class="modal fade" id="job-modal-{{job.id}}" tabindex="-1"
role="dialog" aria-labelledby="{{job.title}}" aria-hidden="true">