Boostrap модальный затемненный - PullRequest
Новая
       0

Boostrap модальный затемненный

0 голосов
/ 04 апреля 2020

Я хочу сделать модальный, но, к сожалению, он не появляется. В результате я получаю, что мой веб-экран выглядит так Похоже, что было бы за пределами модального Логин над формой мой сайт меняет шрифт всякий раз, когда я удаляю это, и модальный становится нормальным 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>

Ответы [ 3 ]

0 голосов
/ 04 апреля 2020

Вы должны удалить класс hide на вашем модале. Ваш модальный скрыт по умолчанию. класс hide установит display: none!important, который будет перезаписывать бутстрапы обычным способом установки модального значения с display: none; на display: block;

Кроме того, вам не хватало двух элементов оболочки: 

    <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>
0 голосов
/ 04 апреля 2020

нужно удалить класс hide 

<!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>
0 голосов
/ 04 апреля 2020

Стиль вашего hide класса, по-видимому, перекрывает ваш модальный, поэтому вы должны его удалить Кроме того, вам нужно только один раз ссылаться на jQuery. 

$(document).ready(function(){
    $("#myModal").modal('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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 class="close">Close</a>
      </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...