html - Bootstrap modal not showing after copy and paste -


im using latest bootstrap , went make second modal register link , copied , pasted exact code had login worked reason register 1 wont. dims background doesnt pop modal up.

    <!doctype html> <html lang="en">   <head>     <meta charset="utf-8">     <meta http-equiv="x-ua-compatible" content="ie=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags -->     <title>yeti draft</title>     <link href="css/bootstrap.css" rel="stylesheet">     <link rel="stylesheet" type="text/css" href="css/layout.css" >     <link rel="stylesheet" type="text/css" href="css/menu.css">     <script src="js/bootstrap.js" type="text/javascript"></script>   </head>     <body>     <div id = "container">     <div id = "header">     <h1>maybe logo</h1>     </div>     <div id = "navbar">         <nav>             <ul>                 <div id = navstart>                 <li><a href="#"><img src="images/logo.png"></a></li>                 <li><a href="#">about</a></li>                 <li><a href="#">winners!</a></li>                 <li><a href="#">contact us</a></li>                 <li><a href="#">faq</a></li></div>                 <div id = "login"><li><a href="#loginmodal" data-toggle="modal">login</a></li>                 <li class = "sign"><a href="#registermodal" data-toggle="modal">sign up</a></li>                 </div>             </ul>         </nav>     </div>     <div id = "content">     </div>     <div id = "footer">     </div> </div>     <!-- login modal -->             <div class="modal fade" id="loginmodal" aria-hidden="true">             <div class = "modal-dialog">                 <div class = "modal-content">                     <div class = "modal-header">                         <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>                         <h3 class="modal-title">login</h3>                      </div>                         <div class="modal-body">                         <form>                          </form>                     </div>                     <div class="modal-footer">                     </div>                     </div>         </div>       <!-- register modal -->         <div class="modal fade" id="registermodal" aria-hidden="true">             <div class = "modal-dialog">                 <div class = "modal-content">                     <div class = "modal-header">                         <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>                         <h3 class="modal-title">sign up</h3>                      </div>                         <div class="modal-body">                         <form>                          </form>                     </div>                     <div class="modal-footer">                     </div>                     </div>         </div>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">   </body> </html> 

the register-modal div placed inside login-modal div.(you have missed 1 of closing div tags login modal.) please put register-modal outside login-modal. work perfectly.

cheers!


Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -