为什么隐藏第一个模态后，第二个模态不能滚动？
我在隐藏和显示模式方面有问题，我正在通过引导程序模式进行用户注册。我给你的场景是为什么在隐藏第一个模态后第二个模态无法滚动。
方案1.管理员将填写用户信息，然后如果用户不存在，则会出现第二个模式。
模式2，在第二个模式中，发生在这里，我无法向下滚动。因为当我滚动时，模态后面的内容也在滚动。
我这里有我的ajax函数，如果用户不存在，则在我的成功函数中将显示模式2。
$.ajax({
url: '/insert_customer_details',
data: formData,
type: 'POST',
dataType: 'JSON',
processData: false,
contentType: false,
success: function (response) {
if (response == 'User Already Exist') {
swal({
title: "This User Already Exist Please do search!",
icon: "warning",
buttons: true,
dangerMode: true,
});
}
else {
swal({
title: "Sucessfully Registered",
icon: "success",
button: "Done",
});
$.ajax({
url:'/get_imaginary_customer_details',
type:'get',
success:function(response) {
$('#add_customer').modal('hide');
console.log(response);
$('#add_cart').modal('show');
var address_customer = response[0]['customer_address'];
var id_customer = response[0]['customer_id'];
var province_customer = response[0]['customer_location'];
var name_customer = response[0]['customer_name'];
$('#append_customer_name').text(name_customer);
$('#place_customer').text(address_customer);
$('#hidden_customer_id').val(id_customer);
$('#hidden_province').val(province_customer);
},
error:function(response) {
console.log(response);
}
})
}
},
error: function (response) {
console.log(response);
}
});
模式1 HTML
<form action="" method="post" enctype="multipart/form-data">
<div class="modal fade" id="add_customer" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">New Customer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeRegistration">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-dark" role="alert" style="background-color:#3366CC; color:white;">
If the user exist, via searching you can easily access there information, and start order
</div>
<div class="container">
<input id="origin-input" class="controls" type="text"
placeholder="Store Postal Code">
<input id="destination-input" class="controls" type="text"
placeholder="Customer Postal Code">
<div id="mode-selector" class="controls">
<input type="radio" name="type" id="changemode-walking" checked="checked">
<label for="changemode-walking">Walking</label>
<input type="radio" name="type" id="changemode-transit">
<label for="changemode-transit">Transit</label>
<input type="radio" name="type" id="changemode-driving">
<label for="changemode-driving">Driving</label>
</div>
<div id="map"></div>
</div>
<br><br>
<div class="row">
<div class="col-md-6">
<label>Customer Name: </label>
<input placeholder="Joel" name="customer_name" value="" required="" class="form-control" id="customer_name" type="text" class="validate">
</div>
<div class="col-md-6">
<label>Customer #: </label>
<input placeholder="Customer Phone #" maxlength="11" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="customer_number" required="" value="" class="form-control" id="customer_number" type="number" class="validate">
</div>
</div>
<br><br>
<div class="row">
<div class="col-md-6">
<label>Email Address: </label>
<input placeholder="Email" name="customer_email" value="" required="" class="form-control" id="customer_email" type="email" class="validate">
</div>
<div class="col-md-6">
<label>Postal Code: </label>
<input type="text" maxlength="6" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="customer_postal" id="customer_postal" required="" class="form-control" placeholder="">
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<label>Registered to store: </label>
@if(Auth::user())
<input placeholder="{{Auth::user()->store_name}}" readonly="" name="customer_location" value="{{Auth::user()->store_name}}" class="form-control" id="customer_location" type="text" class="validate">
@endif
</div>
</div>
<br><br>
<div class="col-md-12">
<label>Customer Order Note:</label>
<textarea name="customer_order" required="required" id="customer_order" class="form-control"></textarea>
<script>
CKEDITOR.replace( 'customer_order' );
</script>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save_customer_details" style="background: linear-gradient(-25deg, #00e4d0, #5983e8); border-color:transparent;">Save changes</button>
</div>
</div>
</div>
</div>
模式2 HTML
<div class="modal fade" id="add_cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg float-left" role="document">
<div class="modal-content" style="width:1360px;">
<div class="modal-header" style="background: linear-gradient(-20deg, #00e4d0, #5983e8);">
<h4 class="modal-title" id="exampleModalLongTitle" style="color:white;">Shopping Cart <i class="fas fa-cart-arrow-down"></i></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="refresh_order">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="width:1360px;">
<div class="row">
<div class="col-md-8">
<div class="jumbotron">
<div class="table-responsive conditional_table_hidden_noun">
<table id="tables_orders" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr style="background: linear-gradient(-20deg, #00e4d0, #5983e8); color:white;" >
<th>Menu</th>
<th>Menu Desc</th>
<th>Menu Price</th>
<th>Menu Image</th>
<th style="display:none;"></th>
</tr>
</thead>
<tbody>
@foreach($category as $menu)
<tr id="productClicked" style="font-size:16px;">
<td class="menu_name">{{$menu->menu_cat_name}}</td>
<td>
{!!
str_limit($menu->menu_cat_desc, $limit = 25, $end = '...')
!!}
</td>
<td class="menu_price">{{$menu->menu_cat_price}}</td>
<td>
<center>
<img src="{{url('/storage/'.$menu->menu_cat_image.'')}}" class="img-fluid" style="width:170px;">
</center>
</td>
<td class="chain_id" style="display:none;">{{$menu->chain_id}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="conditional_table_hidden_condiments">
<div class="container">
<table class="table table-striped table-bordered " id="customer_table_update_chain_order" style="width:100%">
<div class="content-noun" style="text-align: center;">
<thead>
<tr style="background: linear-gradient(-20deg, #00e4d0, #5983e8); color:white;" >
<th>Condiment Screen Name</th>
<th>Condiment Price</th>
<th>Condiment Image</th>
</tr>
</thead>
</div>
<tbody>
</tbody>
</table>
</div>
<center>
<button class="back_to_noun btn btn-primary">Back to Noun</button>
</center>
</div>
</div>
</div>
<div class="col-md-4">
<div class="container">
<div class="jumbotron" style="background: linear-gradient(-20deg, #00e4d0, #5983e8);">
<div class="header" style="text-align: center;">
<i class="fas fa-cart-arrow-down" style="font-size:50px; color:white;"></i>
<br><br>
<h3 style="font-weight: bold; color:white;">Build customer meal.</h3>
<label style="color:white; font-size:15px;">This button will be served as customers menu.</label><br>
<div style="line-height:15px;">
<b style="font-size:17px; font-weight: 300; color:white;"><label>Customer: </label> <label id="append_customer_name" style="font-weight: 300;"> </label></b>
<label style="font-size:17px; font-weight: 300; color:white;">Deliver to: <label id="place_customer" style="font-weight: 300;"></label> </label>
</div>
<br>
<h4 style="color:white; font-weight:bold;" class="append_customer_noun_order"></h4>
<h5 style="color:white;" class="append_customer_price_order"></h5>
<br>
<input type="hidden" value="" class="hidden_noun_id" name="">
<table class="table table-hover upsize_check" id="noun_chaining_order" style="border:none;">
<thead>
<tr style="font-size: 15px; color:white;">
<th scope="col">Qty</th>
<th scope="col">Condiments</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody style="font-size:14px; color:white;" class="tbody_noun_chaining_order">
</tbody>
</table>
<hr>
<div class="row">
<input type="hidden" name="" value="" id="hidden_customer_id">
<input type="hidden" value="" id="customer_details">
<div class="col-md-7" style="color:white; font-size: 30px; font-weight: bold;">Total:</div>
<div class="col-md-3" style="color:white; font-weight: bold; font-size: 30px;"><p class="append_customer_noun_order_price">0.00</p></div>
</div>
<hr>
<br>
<button type="button" class="btn btn-primary" style="background-color:#3D0081; border-color:#3D0081;" id="add_to_cart">Add To Customer Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？