Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
140
rated 0 times [  147] [ 7]  / answers: 1 / hits: 24548  / 6 Years ago, mon, january 29, 2018, 12:00:00
    <head>
<meta charset=utf-8 />
{% load staticfiles %}
<link rel='stylesheet' href={% static 'homepage/css/bootstrap.min.css' %}>
<link rel='stylesheet' href={% static 'homepage/css/element.css' %}>
<link href=https://fonts.googleapis.com/css?family=Comfortaa rel=stylesheet>

<style type=text/css>
html,
body {
height:100%;
font-family: 'Comfortaa', cursive;
padding-top: 100px;
}
header {
font-family: 'Comfortaa', cursive;
}
</style>
</head>

<header>
<nav class=navbar navbar-expand-lg navbar-inverse fixed-top id=mainNav>
<div class=container-fluid>
<a class=navbar-brand logo href={% url 'index' %}><img class=logo img src={% static 'homepage/img/leaves.png' %}>NAME</a>
<div class=collapse navbar-collapse id=mainNav>
<ul class=navbar-nav ml-auto>
<li class=nav-item>
<a class=nav-link href={% url 'product_page' %}>ProductName`</a>
</li>
<li>
<p class=navbar-btn>
<a data-toggle=modal href=# data-target=#newsletterModal class=btn btn-default>Newsletter</a>
</p>
</li>
<li class=nav-item>
<a class=nav-link js-scroll-trigger href={% url 'store' %}>Store</a>
</li>
<li class=nav-item>
<a class=nav-link js-scroll-trigger href={% url 'login' %}>Log In</a>
</li>
</ul>
</div>
</div>
</nav>
<div class=modal fade id=newsletterModal tabindex=-1 role=dialog aria-labelledby=newsletterModal aria-hidden=true>
<div class=modal-dialog>
<div class=modal-content>
<div class=modal-header>
<button type=button class=close data-dismiss=modal> &times;</button>
<h4>Sign Up For Our Newsletter!</h4>
</div>
</div>
</div>
<div>
</header>

{% block content %}
{% endblock %}


I am trying to launch a modal when the newsletter button is clicked in the navbar but the modal is not showing. I followed some other stack overflow posts and tried to put the modal div outside the navbar among other tricks but nothing seems to be working. Any suggestions?



Any other suggestions with my code would also be appreciated. Thanks!


More From » html

 Answers
13

Just tested your modal and it's working fine. The only possible reason is that you either aren't loading one of the following files OR you are loading an outdated version of some of them.



So, make you sure you are loading all of the following files (in that order):





<script src=https://code.jquery.com/jquery-3.2.1.slim.min.js integrity=sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN crossorigin=anonymous></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js integrity=sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q crossorigin=anonymous></script>
<script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js integrity=sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl crossorigin=anonymous></script>





And also make sure that you are loading (in the head section) an up-to-date version of the css which is this:





<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css integrity=sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm crossorigin=anonymous>




[#55328] Thursday, January 25, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
alorac

Total Points: 262
Total Questions: 82
Total Answers: 97

Location: Libya
Member since Mon, Dec 7, 2020
3 Years ago
alorac questions
Sat, Oct 10, 20, 00:00, 4 Years ago
Tue, Sep 22, 20, 00:00, 4 Years ago
Wed, Jul 1, 20, 00:00, 4 Years ago
Wed, Jun 3, 20, 00:00, 4 Years ago
Sun, May 17, 20, 00:00, 4 Years ago
;