Question

所以我正在设计一个调查表，直到“调查”出现才会出现。单击页面中的链接。但是，我还没有成功地将模式框显示在同一页面上以进一步设置样式。我已经完成了W3schools＆＃39; bootstarp模式框中所述的所有要求，但到目前为止还没有解决方案。这是我的代码：

＆＃13;

:root{
    --headcolor: rgba(45, 45, 45, 0.2); 
}



.heading{
    border: 2px solid green;
    margin-top: 5px;
}



#content{
    margin: auto;
}


 .tree {
    position: relative;
    top: 250px;
    left: 10px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    width: 135px;
  }
  
  .tree:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
  
  .tree:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }




#title{
    margin: 40px auto;
    text-align: center;
    padding: 40px 200px;
    background: var(--headcolor);
}


#description{
 text-align: center;
}

label{
    margin-left: 20px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Survey Form</title>
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
    
    <h3 class="tree" id="content" data-toggle="modal" data-target="#myModal">Take Survey</h3>

        <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog"> 

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
              <!-- <h4 class="modal-title">Modal Header</h4> -->
              <h1 id="title">Customer Feedback Survey</h1>
            </div>

            <div class="modal-body">
              <!-- <p>Some text in the modal.</p> -->
              <p id="description">How can we improve our services? We Value your feedback so thank you for taking your time.</p><br>
                     <!-- <h6>We Value your feedback so thank you for taking your time</h6><br>
                     <br> -->
                     <p>Parts marked  with '*'  are compulsory!</p>
                <form action="" id="survey-form">
                        <fieldset>
                            <legend>Biodata:</legend>
                            <label for="salutation">Salutation :</label>
                                <select id="dropdown">
                                    <option>Mr</option>
                                    <option>Miss</option>
                                    <option>Mrs</option>
                                    <option>Dr</option>
                                    <option>Prof</option>
                                    <option>Engr</option>
                                    <option>Surv</option>
                                    <option>Chief</option>
                                </select>           
                            <label for="name">*Name :</label>
                            <input type="text" id="name" name="name" value="First name  Last name">
                            
                            <label for="email">*Email :</label>
                            <input type="text" id="email" name="email" value="example@example.com">
                             
                            <label for="age"> Age :</label>
                            <input type="number" id="number" name="age">
                        </fieldset><br><br>
                        
                        
                        <!-- Level of satisfaction -->
                        <fieldset>
                          <legend>On a scale of 1 to 5 how are you likely to recommend us :</legend>
                          <input id="vs" type="radio" name="levels" value="vs">
                          <label for="vs">Very Satisfied</label><br>

                          <input id="ss" type="radio" name="levels" value="ss">
                          <label for="ss">Somewhat Satisfied</label><br>

                          <input id="ud" type="radio" name="levels" value="ud">
                          <label for="ud">Undecided</label><br>

                          <input id="us" type="radio" name="levels" value="us">
                          <label for="us">Unsatisfied</label><br>

                          <input id="vu" type="radio" name="levels" value="vu">
                          <label for="vu">Very Unsatisfied</label>
                        </fieldset><br>

                        <fieldset>
                            <legend>Which services would you like us to improve on?</legend>
                            <input id="newbie" type="checkbox" name="levels" value="newbie">
                            <label for="newbie">Car Wash</label><br>
      
                            <input id="intermediate" type="checkbox" name="levels" value="intermediate">
                            <label for="intermediate">Laundry</label><br>
      
                            <input id="master" type="checkbox" name="levels" value="master">
                            <label for="master">Upholstery Wash</label><br>
      
                            <input id="guru" type="checkbox" name="levels" value="guru">
                            <label for="guru">Dish Wash</label><br>

                            <input id="guru" type="checkbox" name="levels" value="guru">
                            <label for="guru">Toy Wash</label>
                        </fieldset>
                        <br>
                        <fieldset>
                            <legend>Comments/Suggestions</legend>
                            <textarea name="message" rows="5" cols="45">
                            </textarea>
                        </fieldset>
                        <br>
                        <input type="submit" name="submit" value="Submit">
                </form>
            </div>

            <div class="modal-footer">
              <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
            </div>
          </div>
          <!-- Modal content ends -->
        </div>
      </div>
        <!--  Modal ends -->
    <script src="../assets/js/bootstrap.min.js"></script>    
</body>
</html>

＆＃13;

Answer 1

Bootstrap.js需要jquery才能工作。

您的代码可在此处使用：Official Documentation

我使用与你的问题相同的代码并在bootstrap.js之前加载了jquery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

模态框问题

1 个答案: