Question posted in 
I have been learning twitter bootstrap, so I tried to build a mockup website. The problem is once the login button is pressed, the model dialog box doesn’t show up, can anyone suggest where I am going wrong?
body {
padding-top: 70px;
background: url('book.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.navi-logo {
font-size: 20px;
color: white;
}
.navi-style {
background-color: #A0522D;
}
.navi-font {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
color: #ffffff !important;
font-size: 18px;
font-weight: bold;
padding-left: 16px;
}
.navhover li a:hover {
background-color: rgba(221, 114, 1, .5);
}
.custom-nav-bar.navbar-toggle {
background-color: #ffffff;
}
.custom-nav-bar.navbar-toggle .icon-bar {
background-color: #888;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="cssfile.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--login model-->
<div class="container">
<div class="model fade" id="login" role="dialog" tab-index="-1" style="display:block">
<div class="model-dialog">
<div class="model-content">
<div class="model-header">
<button type="button" class="close" data-dismiss="modal" style="font-size:14px;">×</button>
<h2 class="modal-title">Log In To Wattpad</h2>
</div>
<!--content closed-->
</div>
<!--Dialog box closed-->
</div>
<!--Model closed-->
</div>
</div>
<nav class="navbar navbar-fixed-top navi-style">
<div class="container-fluid">
<div class="navbar-header">
<!--toggle button design-->
<button type="button" class="navbar-toggle collapsed pull-right custom-nav-bar" data-toggle="collapse" data-target="#navbarhome">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navi-logo" href="#">wattpad</a>
</div>
<div class="collapse navbar-collapse" id="navbarhome">
<ul class="nav navbar-nav navhover">
<li class="dropdown">
<a class="dropdown-toggle navi-font" data-toggle="dropdown" href="#">Discover <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Browse</li>
<li><a href="#">Action</a>
</li>
<li><a href="#">Horror</a>
</li>
<li><a href="#">Chickflick</a>
</li>
<li><a href="#">TeenFiction</a>
</li>
<li><a href="#">Paranormal</a>
</li>
<li><a href="#">Fantasy</a>
</li>
<li><a href="#">Vampire</a>
</li>
<li><a href="#">Werewolf</a>
</li>
</ul>
</li>
<li><a class="navi-font" href="#">Create</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle navi-font" data-toggle="dropdown" href="#">Community <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Clubs</a>
</li>
<li><a href="#">Awards</a>
</li>
<li><a href="#">Contests</a>
</li>
<li><a href="#">#Justwriteit</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navhover">
<li><a class="navi-font" data-toggle="modal" rel="nofollow" href="#login">Login</a>
</li>
<li><a class="navi-font" data-toggle="modal" href="#signup">Signup</a>
</li>
</ul>
</div>
</div>
<!--container closed-->
</nav>
<!--navbar closed-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2
Answers
I think it has missing CSS because the class names are wrong.
Change this:
To this:
You did not put data-target=”#login” attribute in your login link.
Please put this, The modal wil be work properly if getting trouble to understand you can view in codepen