Boostrap 模态黑屏

Question

我想制作一个模态但不幸的是它没有显示我得到的结果是我的 web 屏幕看起来像这样看起来模态的外部是什么当我删除它时，我的网站表单上方的登录会更改字体并且模态变为正常 html 这是我在进行更改时注意到的

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

提前致谢

     <style>
        @font-face {
          font-family: Open-sans;
          src: url(OpenSans-Light.ttf);
      }

      body {
        font-family: Open-Sans;
        background-image:url('images/ElaionGb.jpg');
        background-size:100%;
        background-repeat:no-repeat;
    }

    .contactform {
        font-family: Open-Sans;
        margin-top:-350px;
        width:190px;       
    }

    .contactform input {
        color:white;
        background-color:transparent;
        width:190px;
        height:40px;
        margin-top:7px;
        margin-bottom:7px;
        border-radius: 11px;
        border: 2px solid blue;
    }

    .sign {
        color:white;
        background-color:transparent;
        width:70px;
        height:40px;
        border-radius: 11px;
        border: 2px solid blue;
    }

    .submit-btn input {
        color:white;
        width:60px;
        height:40px;
    }

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>
</head>
<body>
    <div class="modal hide fade" id="myModal">
      <div class="modal-header">
        <a class="close" data-dismiss="modal">X</a>
        <h3>Welcome to elaion e-shop.</h3>
      </div>
      <div class="modal-body">
        <p>Sign-in to download the excel order file.<br>
        Modify as you please.<br>
        Attach and send to us.</p>
      </div>
      <div class="modal-footer">
        <a class="close">Close</a>
      </div>
    </div>

Answer 1

您必须删除模态上的hide class 。 默认情况下，您的模式是隐藏的。 隐藏 class 将设置display: none!important ，这将覆盖引导程序从display: none; display: block;

此外，您还缺少两个包装 div：

    <div class="modal-dialog">
      <div class="modal-content">

 <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $("#myModal").modal('show'); }); </script> </head> <body> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">X</a> <h3>Welcome to elaion e-shop.</h3> </div> <div class="modal-body"> <p>Sign-in to download the excel order file.<br> Modify as you please.<br> Attach and send to us.</p> </div> <div class="modal-footer"> <a class="close">Close</a> </div> </div> </div> </div> </body>

Answer 2

您需要删除 class 隐藏

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>hi</title> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="modal fade" id="myModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">X</a> <h3>Welcome to elaion e-shop.</h3> </div> <div class="modal-body"> <p>Sign-in to download the excel order file.<br> Modify as you please.<br> Attach and send to us:</p> </div> <div class="modal-footer"> <a data-dismiss="modal" class="close">Close</a> </div> </div> <script type="text/javascript" src="https.//code.jquery.com/jquery-3.4.1.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function () { $('#myModal'):modal({ show; true }) }); </script> </body> </html>

Answer 3

问题是从一开始就设置了 class hide 。 这会阻止模态显示。 改变

<div class="modal hide fade" id="myModal">

至

<div class="modal fade" id="myModal">

Boostrap 模态黑屏

问题描述

3 个解决方案

解决方案1
0 2020-04-04 16:35:21

解决方案2
0 已采纳 2020-04-04 16:35:41

解决方案3
0

Boostrap 模态黑屏

问题描述

3 个解决方案

解决方案1 0 2020-04-04 16:35:21

解决方案2 0 已采纳 2020-04-04 16:35:41

解决方案3 0

解决方案1
0 2020-04-04 16:35:21

解决方案2
0 已采纳 2020-04-04 16:35:41

解决方案3
0