php - Bootstrap 模态联系表单消失

Question

我在使用 Bootstrap 联系表单时遇到问题，当导航栏在响应式设计方面发生变化时，该表单就会消失。我现在找不到这个词，但基本上当屏幕宽度低于 991px 时，导航栏被手机和平板电脑的导航图标取代。 (见 CSS)

更好的概述:

工作原理:

• 可以通过在导航栏中按“4” 打开联系表单。 (该词在 PHP 中被替换为 4，因为这是挪威语。)
• 也可以通过按“bestill foredrag!” 打开联系表。在封面照片下方。

什么有效:

• 当屏幕尺寸大于 991 像素时，联系人表单可以在导航栏和封面照片下方正常打开。

• 低于 991 像素:当我按下菜单图标，然后按下列表链接时，联系表单打开。

什么不起作用:

• 低于 991 像素:当我在封面照片下方按 “bestill foredrag!” 时，联系表未打开。

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 - 导航栏

<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 - 封面照片下方

<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>

有什么想法吗？询问是否有任何混淆。我正要发布屏幕截图，但 Photoshop 停止工作...

Answer 1

只是为了澄清 - div .modal 和 .modal-dialog 是否都没有显示在 <991px 上？我在这里看到了一些问题 -

模态框不应嵌套在列表项中；尝试删除此代码

<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 -->

• 从导航栏列表项并将其移动到主容器，因此它不会因移动尺寸的菜单折叠而隐藏。

还可以尝试将 sm 和 xs 列类(即 col-sm-9、col-xs-9)添加到您的模式中，以便更好地控制移动版本。最后，在

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

对:o;应该是对的:0。