bootstrap 模态框被覆盖，显示不正确

Question

由于我包含了一些样式表和 java 脚本，我的 bootstrap 模式不再正常工作。 div 和 "modal-backdrop" class 似乎位于 div 和 "modal" class 的前面。模态内容仅在一个小的可滚动 div 中可见。点击按钮可以看到问题：http://tamara-alber.de/meseck/bootstrap/index.html

不知道为什么乱七八糟。我无法解决问题。感谢您的帮助。

<!DOCTYPE html>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Scrolling Nav - Start Bootstrap Template</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom Fonts -->
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"></link>

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic"></link>

<link type="text/css" href="font-awesome/css/font-awesome.min.css" rel="stylesheet"></link>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Animate CSS -->
<link rel="stylesheet" href="css/animate.css">

<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">

<!-- Lightbox CSS -->
<link type="text/css" href="css/lightbox.css" rel="stylesheet">
<link type="text/css" href="css/dark.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Scrolling Nav JavaScript -->
<script type="text/javascript" src="js/scrolling-nav.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/ekko-lightbox.js"></script>

<script>
    $(document).ready(function ($) {
            // delegate calls to data-toggle="lightbox"
            $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
                event.preventDefault();
                return $(this).ekkoLightbox({
                    always_show_close: true
                });
            });

        });

    new WOW().init();

    $(window).stellar({ horizontalScrolling: false });

</script>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">Frederick Meseck</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#about">Test?</a>
                </li>
                <li>
                    <a class="page-scroll" href="#portfolio">Test</a>
                </li>
                <li>
                    <a class="page-scroll" href="#pricing">Test</a>
                </li>
                <li>
                    <a class="page-scroll" href="#angebot">Test</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Test</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<!-- Intro Section -->
<section id="intro" class="intro-section" data-stellar-background-ratio="0.1">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 wow animated bounceInDown">
                <a class="page-scroll" href="#about"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></a>
            </div>
        </div>
    </div>
</section>



<!-- Wofür Section -->
<section id="about" class="about-section">
    <div class="container">
        <div class="row wow animated zoomIn" data-wow-duration="700ms">
            <div class="col-lg-12">
                <h1 class="special-heading dark-special">Test?</h1>
                <h3 class="section-subheading text-muted">Test</h3>
            </div>
        </div>


    </div>
</section>

<!-- Erfahren Sie mehr -->
<section class="technology-section">
    <div class="container">
        <div class="row wow animated zoomIn">
            <div class="col-lg-12">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Button</button>
                <div id="myModal" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-lg">

                    <!-- Modal content-->
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title special-heading dark-special">Features und Technologie</h4>
                      </div>
                      <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="featurebox margin-btm-30">
                                    <i class="fa fa-html5"></i>
                                    <div class="featuretext">
                                        <h4>Test</h4>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                                    </div>
                                </div><!-- END OF FEATUREBOX 1 -->

                            </div><!-- END OF COL FEATURE BOX1 -->
                            <div class="col-md-4 margin-btm-30">
                                <img src="images/frederick_meseck_angebot_starter_plus" class="img-responsive featureimg" alt="">
                            </div><!-- END OF COL FEATURE BOX2 -->
                            <div class="col-md-4">
                                <div class="featureboxleft margin-btm-30 ">
                                    <i class="fa fa-envelope"></i>
                                    <div class="featuretext">
                                        <h4>Test</h4>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                                    </div>
                                </div><!-- END OF FEATUREBOX 1 -->

                            </div><!-- END OF COL FEATURE BOX3 -->
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</section>





<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

Answer 1

从Bootstrap docs...

Modal markup placement Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

如上所述，如果您移动标记使其不再嵌套在其他元素中，例如在结束 </body> 之前，它将按您预期的那样工作。

bootstrap 模态框被覆盖，显示不正确

bootstrap modal is covered and not displayed correctly

jquery

twitter-bootstrap

bootstrap-modal