HTML : 模态框应该在我不点击它的情况下打开

Question

我正在寻找一种功能，在到达页面时，模态 window 弹出动画在实际按下按钮的情况下发生：这是我的代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
   button {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 10%;
    }

    button:hover {
        opacity: 0.8;
    }


/* Full-width input fields */
input[type=text], input[type=password] {
  width: 30%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 10%;
}

button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 20%;
  border-radius: 10%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
  text-align : centre
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
</style>
</head>
<body style = "background-color : blue">

<h2 style = "text-align: center;">Let's Start</h2>

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto; -webkit-box-align: center; ">Describe</button>

<div id="id01" class="modal">
  
  <form class="modal-content animate" action="/action_page.php" method="post">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="doctor.jpg" alt="Avatar" class="avatar">
    </div>

    <div class="container"><centre>
        Name&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;:    
        <input type="text" name="name" placeholder="Enter name"><br>
        Age&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;:
        <input type="text" name="age" placeholder="Enter age"><br>
        Gender&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;:   
        <input type="text" name="gender" placeholder="Enter gender"><br>
        Symptoms &ensp;&ensp;&ensp;: 
        <input type="text" name="symptoms" placeholder="Enter symptoms"><br>
        Diagnosis&ensp;&ensp;&ensp;&ensp;:
        <input type="text" name="diagnosis" placeholder="Enter diagnosis"><br>
        Prescription&ensp;&ensp; :
        <input type="text" name="prescription" placeholder="Enter prescription"><br>
        Advice &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;:
        <input type="text" name="advice" placeholder="Enter advice"><br>
        <input type="submit" value="Submit">
        </div></centre>

   
  </form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

</script>


</body>
</html>

发生的情况是我们通过从另一个页面重定向到达此页面。到达这里时，页面应该有片刻空白，然后会弹出模态框。请告诉我怎么做

Answer 1

试试这个，

等待 2 秒（2000 毫秒） 以查看 弹出窗口。

setTimeout(function(){ 
  if($(".modal").css("display")=="none"){
    $(".modal").css("display","block") ;
  }
}, 2000);

setTimeout(function(){ 
  if($(".modal").css("display")=="none"){
    $(".modal").css("display","block") ;
  }
}, 2000);

body {font-family: Arial, Helvetica, sans-serif;}
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 10%;
}

button:hover {
    opacity: 0.8;
}


/* Full-width input fields */
input[type=text], input[type=password] {
  width: 30%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 10%;
}

button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 20%;
  border-radius: 10%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
  text-align : centre
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
p{color:white;text-align:center;}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</head>
<body style = "background-color : blue">

<h2 style = "text-align: center;">Let's Start</h2>
<p>Wait 2seconds to popup show</p>
<div id="id01" class="modal">
  
  <form class="modal-content animate" action="/action_page.php" method="post">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="doctor.jpg" alt="Avatar" class="avatar">
    </div>

    <div class="container"><centre>
        Name&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;:    
        <input type="text" name="name" placeholder="Enter name"><br>
        Age&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;:
        <input type="text" name="age" placeholder="Enter age"><br>
        Gender&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;:   
        <input type="text" name="gender" placeholder="Enter gender"><br>
        Symptoms &ensp;&ensp;&ensp;: 
        <input type="text" name="symptoms" placeholder="Enter symptoms"><br>
        Diagnosis&ensp;&ensp;&ensp;&ensp;:
        <input type="text" name="diagnosis" placeholder="Enter diagnosis"><br>
        Prescription&ensp;&ensp; :
        <input type="text" name="prescription" placeholder="Enter prescription"><br>
        Advice &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;:
        <input type="text" name="advice" placeholder="Enter advice"><br>
        <input type="submit" value="Submit">
        </div></centre>

   
  </form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

</script>


</body>
</html>

HTML : 模态框应该在我不点击它的情况下打开

HTML : Modal should open without me clicking on it

javascript

css

modal-dialog

popup