CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3modal-dialogbootstrap-modal
TheAmazingKnight
TheAmazingKnight

Reputation: 2474

How do I properly display Bootstrap's modal box?

I am using Bootstrap v3.1.1 and copied the exact documentation for the modal box test. I am trying to properly display Bootstrap's modal box, but for some reason, it will work some of the time when I test it. I clicked on a button that was suppose to trigger the modal box, showing a gray fade/shadow (the background when the modal box is open) and disappears fast. I debugged and saw a lot of errors saying Declaration dropped.

Another thing I noticed, The URL C://.../test.html did not make the modal box appear correctly, however adding C://.../test.html# made the box function correctly. Now, this makes me wonder, since I have a couple of hashtags in my overall html document, does it have anything to do with those hashtags? Maybe, this line of code in particular?

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">

If not, what is the root cause for the problem as to why a hashtag at the end of url string made it work and how can I fix it?

HTML:

<!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">
<title>Login Test</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

<style>
 /*{border:1px dotted blue;}*/
 footer{margin-top:20px;}
</style>
</head>
<body>

<!-- Skip Navigation -->
<a href="#PrintReady" class="offscreen" style="display:none;">Skip to Main Content Area</a>  
<div id="container">
<div class="container">

    <div class="bannerLogoArea" style="padding:20px 0;">
    <span class="bannerSiteAreaText">Login Test</span>
    </div> 

    <!-- PlaceBar -->
    <div class="nav-cntr">
        <!-- Static navbar -->
        <div class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a class="wpsUnSelectedPlaceLink" href='#'>&nbsp;Home&nbsp;</a></li>
                        <li><a class="wpsUnSelectedPlaceLink" href='#'>&nbsp;Account&nbsp;</a></li> 
                        <li><a class="wpsUnSelectedPlaceLink" href='#'>&nbsp;Contact Us&nbsp;</a></li>      
                        <li class="active"><a class="wpsSelectedPlaceLink" href='#'>&nbsp;Login Test&nbsp;</a></li> 
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><strong>Login or Register</strong></a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div><!--/.container-fluid -->
        </div> 
    </div><!--/.nav-cntr -->       

    <div id="PrintReady"> 

        <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
            <tr height="100%"> 
                <td valign="top" > 
                    <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center"> 
                        <tr>
                            <td width="100%" valign="top">

                                <div class="default-skin">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <h1>Member Registration</h1>
                                            <p>Please complete the following fields and click 'Continue.'</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-10">
                                            <form class="form-horizontal" role="form">

                                                <!--Button trigger modal-->
                                                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                                    Read & Accept Lorem Ipsum
                                                </button>

                                            </form>
                                            <!--Modal-->
                                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>  

                            </td>
                        </tr> 
                    </table>
                </td>
            </tr> 
        </table>         

    </div><!-- /PrintReady -->

</div> <!-- /container -->  
</div>
</body>
</html>

Upvotes: 1

Views: 939

Answers (2)

Sean Ryan
Sean Ryan

Reputation: 6056

Remove the form element that surrounds the button that triggers the modal. Your button is triggering the form action, which is why it suddenly changes. Working example here: http://www.bootply.com/zYGnsEkuF2

<!-- <form class="form-horizontal" role="form"> REMOVE THIS LINE -->
  <!--Button trigger modal-->
  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Read & Accept Lorem Ipsum
  </button>
<!-- </form> REMOVE THIS LINE -->

Upvotes: 1

nolawi
nolawi

Reputation: 4649

Oh I figured it out. Move the modal outside of your form!

move this <div class="modal fade" id="myModal" ....> outside of <form class="form-horizontal" role="form">

below it. Its true though that div's inside form are perfectly acceptable somehow though bootstrap.js has a hard time with it. its a known bug!

Upvotes: 1

Related Questions