Boostrap modal blacked out

Question

I want to make a modal but unfortunately it doesn't show up The result I get is my web screen looking like this It looks like what would be the outside of the modal The Login above the form of my site changes font whenever I remove this and the modal becomes normal html this is what I noticed from making changes

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

Thanks in advance

     <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

You have to remove the hide class on your modal. Your modal is hidden by default. the hide class will set display: none!important , wich will overwrite bootstraps normal way of setting the modal from display: none; to display: block;

Also, you were missing two wrapper divs:

    <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

you need to delete the class 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>

Answer 3

The problem is that the class hide is set from the beginning. This is preventing the modal from showing. Change

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

to

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

Boostrap modal blacked out

Question

3 answers

solution1
0 2020-04-04 16:35:21

solution2
0 ACCPTED 2020-04-04 16:35:41

solution3
0

Boostrap modal blacked out

Question

3 answers

solution1 0 2020-04-04 16:35:21

solution2 0 ACCPTED 2020-04-04 16:35:41

solution3 0

solution1
0 2020-04-04 16:35:21

solution2
0 ACCPTED 2020-04-04 16:35:41

solution3
0