Question

我在使用bootstrap设计的asp.net上工作。我在按钮点击时实现了模态弹出窗口。不幸的是，我的弹出窗口面临灰色，没有任何功能。如果我点击模态弹出窗口关闭的任何位置，灰色颜色总是出现，直到我刷新。

我的代码：

<div class="table-responsive">
                                <table id="Table1" class="table">
                                    <thead>
                                        <tr>
                                            <th>Type</th>
                                            <th>Price</th>
                                            <th>View</th>
                                            <th>

                                                <!-- Trigger the modal with a button -->
                                                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Take Appointment</button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>

模态弹出窗口：

<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">Appointment Details</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row text-center">
                                                <div class="col-sm-3 col-xs-3">
                                                    <div class="form-group">
                                                        <label class="control-label">Type Name:</label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-xs-6">

                                                    <div class="input-group">
                                                        <asp:TextBox ID="txtName" runat="server" placeholder="Enter Type Name" class="form-control"></asp:TextBox>

                                                    </div>
                                                </div>


                                            </div>

                                            <div class="row text-center">
                                                <div class="col-sm-3 col-xs-3">
                                                    <div class="form-group">
                                                        <label class="control-label">Price:</label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-xs-6">

                                                    <div class="input-group">
                                                        <asp:TextBox ID="TextBox1" runat="server" placeholder="Enter Price" class="form-control"></asp:TextBox>

                                                    </div>
                                                </div>

                                                <div class="col-sm-3 col-xs-3">
                                                </div>
                                            </div>
                                            <div class="input-group col-md-12 input-append" data-date-format="dd/mm/yyyy" id="divDateOfBirth">
                                                <input class="date-picker form-control Datevalidate hasDatepicker" data-val="true" data-val-regex="Please enter valid value" data-val-regex-pattern="^(?:(?:31(\/)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{4})$" data-val-required="Please enter valid value" id="txtRESIDENT_SINCE" maxlength="10" name="RESIDENT_SINCE" onkeypress="return isDate(event)" placeholder="dd/mm/yyyy" type="text" value="" autocomplete="off">
                                                <!--<input id="date-picker-2" type="text" class="date-picker form-control">-->
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-remove" id="residentHideCal" onclick="clearCal(this)"></span>
                                                </span><span id="SpanDob1" class="input-group-addon showdp">
                                                    <span class="glyphicon glyphicon-calendar" id="residentShowCal" onclick="showCal(this)"></span>
                                                </span>
                                            </div>
                                            <div class="clockpicker">
                                                <div class="input-group clockpicker">
                                                    <input type="text" class="form-control" value="09:30">
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-time"></span>
                                                    </span>
                                                </div>
                                                <script type="text/javascript">
                                                    $('.clockpicker').clockpicker();
                                                </script>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button runat="server" class="btn btn-primary btn-sm" data-dismiss="modal">Submit</button>
                                            <button type="button" class="btn btn-default btn-danger" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>

                                </div>
                            </div>

我目前的结果：

asp.net中的黑屏模态弹出式引导程序

0 个答案: