Question

我正在为我的大学项目在页面上创建一个预订约会部分，我已经从w3schools.com为它创建了一个模式表单，但是当单击我的按钮没有任何反应并且所有元素都显示在主菜单上时，该表单不起作用页面，而不是弹出的模式表单。

<link rel="stylesheet" type="text/css" href="formstyle.css">    //importing css file
<script type="text/javascript" src="form.js"></script>          //importing js file
<div class="hb-appointmentcontent">
    <h3>Want to Make a Booking or Have a Question?</h3>
    <div class="hb-description">
        <p>Call me : <strong>002-6666-8888</strong> or fill out our online booking <span>& equiry form and we’ll contact you</span>
        </p>
    </div>
    //beginning of the form//
    <div>
        //submit button//
        <button onclick="document.getElementById('id01').style.dislay='block'" style="width:auto;">Make an appointment
        </button>
        <div id='id01' class="modal">
            <form class="modal-content animate" action="/perform.php"> //modal css called from css//
                <div class="imgcontainer">
                    <span onclick="document.getElementById('id01').style.display='none'" class="close"
                          title="close modal">&times;</span>
                    <img src=""></img>
                </div>
                <div class="container"> //conatiner for the modal form elements//
                    <div>
                        <input type="text" id="fname" name="fname" placeholder="FirstName(required)">
                        <input type="text" id="lname" name="lname" placeholder="LastName(required)">
                    </div>
                    <div>
                        <select id="service" name="services" placeholder="select your service">
                            <option>Skin Care</option>
                            <option>Weight Loss</option>
                            <option>Facial</option>
                            <option>Hair Treatment</option>
                            <option>Laser Hair Removal</option>
                            <option>Botox/Fillers</option>
                        </select>
                    </div>
                    <div>
                        <input type="date" name="birth-date" value="" placeholder="Date of Birth (required)">
                        <input type="radio" name="sex" value="male">Male
                        <input type="radio" name="sex" value="female">Female
                        <input type="radio" name="sex" value="child">Child
                    </div>
                    <div>
                        <input type="text" id="email" name="Email" placeholder="Your Email Id(required)">
                        <input type="text" id="phone" name="Phone" placeholder="Your contact no.(required)">
                    </div>
                    <div>
                        <textarea id="message" name="Message" placeholder="Your Message(required)"
                                  style="height: 200px"></textarea>
                    </div>
                    <div>
                        <input type="submit" value="Submit" name="submit" id="submit"> //submit button//
                    </div>
                    <div class="container" style="background-color: #f1f1f1">
                        <button type="button" onclick="document.getElementById('id01').style.display='none'"
                                class="cancelbtn"> cancel
                        </button>
                        //cancel button
                        <span class="psw">Forget<a href="#"> password?</a></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</div>

我想在单击按钮后显示模式表单，但是表单的元素显示在按钮下方的主页上。我已经从W3schools.com [模态参考] [1]中创建了CSS表单。我也导入了javascript页面，但似乎无法解决。请帮助我，我对此很陌生

  [1]: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_login_form_modal

Answer 1

You can do it with jquery and bootstrap 3 or 4. use any cdn for jquery and bootstrap and write this HTML code. I used this code with bootstrap 3.

   <button class="show">Make an appointment
    </button>
   <div class="modal fade">
    <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Headings of modal</h4>
       </div>
     <div class="modal-body">
    <p>Your form here</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div><!-- /.modal-content -->

And then this jquery code

    $(document).ready(function(){
     $(document).on('click','.show',function(){
       var mod = $('.modal').modal();
     });
    });

如何连接按钮以打开模态功能

1 个答案: