Bootstrap模式联系表单消失

Question

I have a problem with the Bootstrap Contact Form which disappear when the navigation bar is changed in terms of responsive design. I can't find the word for it right now, but basically the navigation bar is replaced by a navigation icon for mobile and tablet when the screen width is below 991px. (see CSS)

A better overview:

How it works:

• The contact form can be opened by pressing "4" in the navigation bar. (The word is replaced with 4 in the PHP because this is in Norwegian. )
• The contact form can also be opened by pressing "bestill foredrag!" below the cover photo.

What works:

• The contact form opens fine in both the nav bar and below the cover photo when the screen size is larger than 991px.

• Below 991px: The contact form opens when I press the menu icon and then the list link.

What does not work:

• Below 991px: The contact form is not being opened when I press "bestill foredrag!" below the cover photo.

CSS

/* Header */
.navbar-header {
    width: 100%;
}

.navbar-header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar-header li {
    display: inline;
}

.navbar-inverse {
    background-color: white;
    border-color: white;
}

#navbar-brand-cont {
    padding-top: 5px;
}


.navbar-brand img {
    height: 22px;
}

#header_menu ul {
    list-style-type: none;
    margin: 0;
    padding-bottom: 10px;
    margin-top: 17px;   
}

#header_menu li {
    display: inline;
    margin-left: 30px;
    margin-right: 30px;
}

#header_menu li a {
    color: #000;
    text-decoration: none;
}

#header_menu li a:hover {
    color: #99cc66;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    #header_menu li {
        margin-left: 10px;
        margin-right: 10px;
    }
}

/*Hide dropdown links until they are needed*/
#header_menu li ul {
    display: none;
}

/*Make dropdown links vertical*/
#header_menu li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
#header_menu li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/*Display the dropdown on hover*/
#header_menu ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*Style 'show menu' label button and hide it by default*/
#header_menu .show-menu {
    text-decoration: none;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Hide checkbox*/
#header_menu input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
#header_menu input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 991px){
    /*Make dropdown links appear inline*/
    #header_menu ul {
        position: static;
        display: none;
        padding-left: 0px;
    }
    /*Create vertical spacing*/
    #header_menu li {
        margin-bottom: 10px;
        clear: both;
        display: block;
        margin-left: 0px;
        margin-right: 0px;
    }

    /*Make all menu links full width*/
    #header_menu ul li, li a {
        width: 100%;
        clear: both;
    }
    /*Display 'show menu' link*/
    #header_menu .show-menu {
        display:block;
    }
    .stortest {
    font-size: 18px;
    }
}



#myModal {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.modal-open {
    padding-right: 0!important;
}


.modal-content, .modal-dialog {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    text-align: left;
    margin-top: 60px;

}

.modal {
    position: fixed;
    right: o;
    top: 60px;
}

.modal-header {
    background: black;
    color: grey;
}

.modal-header .close {
    color: #99cc66 !important;
    text-shadow: 0px 0px;
}

.modal-header a:link {
    color: #99cc66 !important; 
}

.modal-body {
    background: #99cc66;
    text-align: left;
}

.btn {
    background: none;
}



.popover  {
    background-color: #black;
    color: #black;
    width: 250px;
}

.popover.right .arrow:after {
    border-right-color: #black;
}

.input-group[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}   


.btn btn-custom pull-bottom {
    background-color: #99cc66;
}


h4.modal-title {
    color: #99cc66;
    margin-bottom:20px;
}

li.popupp {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}


/* Sosiale ikoner */

#icon-bar-holder {
    float: right;
}

#icon-bar-holder ul {
    padding-bottom: 0px;
    margin-top: 0px;
}

#icon-bar-holder li {
    list-style-type: none;
    margin-left: 0;
    margin-right: 0;
}

#iconbar-left, #iconbar-right {
    width: 50px;
    height: 50px;
}



#icon-bar-left, #icon-bar-left:hover, #icon-bar-right, #icon-bar-right:hover {
    width: 30px;
    height: 30px;
    background-size: 30px auto;
    display: inline-block;  
}


#icon-bar-left {
    background: url(img/ikoner/twitter_hover.png) no-repeat top left;
    background-size: 30px auto; 
}

#icon-bar-left:hover {
    background: url(img/ikoner/twitter.png) no-repeat top left;
    background-size: 30px auto;
}

#icon-bar-right {
    background: url(img/ikoner/facebook_hover.png) no-repeat top left;
    background-size: 30px auto; 
}

#icon-bar-right:hover {
    background: url(img/ikoner/facebook.png) no-repeat top left;
    background-size: 30px auto;
}


@media screen and (max-width : 365px) {
    #icon-bar img {
        display: none;
    }
}

@media screen and (max-width : 450px) {
    .navbar-brand img {
        height: 18px;
    }

    #icon-bar img {
        margin-top: 0px;
        width: 20px;
    }
}

@media only screen and (min-width: 100px) and (max-width: 450px) {
    .navbar-header {
        margin: 0;
    }
}

@media only screen and (min-width: 100px) and (max-width: 450px) {
    .navbar-header{
        margin-left: 0;
        margin-right: 0;
    }
    #header_menu {
        margin-top: 4px;
    }
}

@media only screen and (min-width: 451px) and (max-width: 991px) {
    #header_menu {
        margin-top: 8px;
    }
}

PHP - Navigation bar

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
            <div id="navbar-brand-cont">
                <a class="navbar-brand" href="http://sookvisuals.com/dev/innbokskontroll">
                    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/innbokskontroll.png">
                </a>
            </div>
            <div id="header_menu">
                <label for="show-menu" class="show-menu"><img src=<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/innbokskontroll_nav_menu.png height="15px"></label>
                <input type="checkbox" id="show-menu" role="button">
                <ul id="menu">
                    <li><a href="http://sookvisuals.com/dev/innbokskontroll/laer-innbokskontroll/" class="stortest btn btn-custom" >1</a></li>
                    <li><a href="http://sookvisuals.com/dev/innbokskontroll/referanser/" class="stortest btn btn-custom">2</a></li>
                    <li><a href="http://sookvisuals.com/dev/innbokskontroll/blogg" class="stortest btn btn-custom">3</a></li>
                    <li class="popupp"> 
                        <a href="#myModal" role="button" class="stortest btn btn-custom" data-toggle="modal">4</a>
                        <div id="myModal" class="modal fade" 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">Bestill<br/>foredrag</h4>
                                        <p>Text</p>
                                        <p>Text</p>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal" name="commentform" method="post" action="send_form_email.php">
                                        <div class="form-group">
                                            <div class="col-md-6 input-group">
                                                    <input type="email" class="form-control" id="email" name="email" placeholder="E-post"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-md-9">
                                                    <textarea rows="8" class="form-control" id="comments" name="comments" placeholder="melding"></textarea>
                                            </div>
                                        <div class="col-md-2">
                                                    <button type="submit" value="Submit" class="btn btn-custom pull-right" id="send_btn"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png"></button> 
                                            </div>
                                        </div>
                                        </form>
                                    </div><!-- End of Modal body -->
                                </div><!-- End of Modal content -->
                            </div><!-- End of Modal dialog -->
                        </div><!-- End of Modal -->
                        <?php
                            // here comes the form - removed because it does not have any affect on this question.
                        ?>

                        <script>
                            $('#send_btn').popover({content: 'Takk for henvendelsen! Din melding blir sendt nå.'},'click'); 
                        </script>            
                </li>
                <div id="icon-bar-holder">
                    <ul>
                        <li id="iconbar-left">
                            <a href="http://facebook.com/innbokskontroll" target="blank">
                                <span id="icon-bar-left">
                                    &nbsp;
                                </span>
                            </a>

                        <li id="iconbar-right">
                            <a href="http://twitter.com/jkippers" target="_blank">
                                <span id="icon-bar-right">
                                    &nbsp;
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </ul>

        </div>          
    </div>
</nav>

PHP - Below the cover photo

<div id="bestill_lear_forside" class="row">
    <a href="#myModal" role="button" class="btn btn-custom" data-toggle="modal">
        <div id="bestill_forside" class="col-sm-6 svart">
                <div class="pull-right vertical-center half-content-wrapper" style="width: 100%;margin-right: 80px">
                        <img class="pull-left" src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v.png">
                        <span class="pull-right bestill_forside_venstre">Bestill foredrag!</span>
                </div>
            </div>
    </a>
        <a href="http://sookvisuals.com/dev/innbokskontroll/laer-innbokskontroll/" target="_self">
        <div id="lear_forside" class="col-sm-6 hvit">
            <div class="pull-left vertical-center half-content-wrapper" style="width: 100%;margin-left: 80px">
                        <img class="pull-right" src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png">
                        <span class="bestill_forside_hoyre">Lær innbokskontroll!</span>
                </div>
         </div>
    </a>
</div>

Any ideas? Ask if there are any confusions. I was going to post screenshots, but Photoshop stopped working...

Answer 1

Just for clarification - are both divs .modal and .modal-dialog not showing on <991px? I'm seeing a few issues here -

Modals should not be nested within list items; try removing this code

<div id="myModal" class="modal fade" 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">Bestill<br/>foredrag</h4>
                                        <p>Text</p>
                                        <p>Text</p>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal" name="commentform" method="post" action="send_form_email.php">
                                        <div class="form-group">
                                            <div class="col-md-6 input-group">
                                                    <input type="email" class="form-control" id="email" name="email" placeholder="E-post"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-md-9">
                                                    <textarea rows="8" class="form-control" id="comments" name="comments" placeholder="melding"></textarea>
                                            </div>
                                        <div class="col-md-2">
                                                    <button type="submit" value="Submit" class="btn btn-custom pull-right" id="send_btn"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png"></button> 
                                            </div>
                                        </div>
                                        </form>
                                    </div><!-- End of Modal body -->
                                </div><!-- End of Modal content -->
                            </div><!-- End of Modal dialog -->
                        </div><!-- End of Modal -->

• from the navigation bar list item and moving it to the main container, so it isn't hidden by the collapse of the menu on mobile sizes.

Also try adding sm and xs column classes (ie col-sm-9, col-xs-9) to your modal for more control on the mobile version. And finally, in

.modal {
    position: fixed;
    right: o;
    top: 60px;
}

right:o; should be right:0.