页面滚动到模态弹出窗口的顶部
[英] page scrolls to top on modal popup
本文介绍了页面滚动到模态弹出窗口的顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 bootstrap(前端)和 codeigniter 开发购物车.添加到购物车项目模式弹出窗口时显示添加项目的详细信息.但我的问题是页面滚动移动到模态弹出窗口的顶部.
<a href="#" id="edit_product" data-id="<?php echo $lat['product_id'];?>"name="id" data-text="加入购物车" class="my-cart-b item_add add_to_cart">加入购物车</a>
阿贾克斯
$(".product_add").click(function(event) {var currentId = globalId;$.ajax({类型:'POST'，url: '<?php echo site_url("ajax_controller1/product_add/'+currentId+'")?>',数据:{id:'1'}，成功:功能(响应){$("#cart_container1").html(响应);$("#myModal3").modal('show');}});/* Aajx */});
模态
<div class="modalfade" id="myModal3" tabindex="-1" role="dialog" style="overflow:visible;"><div class="modal-dialog" role="document" style="overflow:visible;"><div class="modal-content modal-info" style="overflow:visible;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
<div class="modal-body" id="cart_container1">
为了解决这个问题，我做了以下工作
$('a.add_to_cart').click(function(e) {e.preventDefault();});body.modal-打开{溢出:可见；}
这是我的演示网站链接
<块引用>
http://cableandmedia.com/ayurstore/
解决方案
我觉得罪魁祸首是href="#"
你可以做两件事
- 只需删除
href="#" 将
<button type="button" id="edit_product" data-id="<?php echo $lat['product_id'];?>"name="id" data-text="加入购物车" class="my-cart-b item_add add_to_cart">加入购物车</button>
这应该对您有所帮助.
请注意，如果您遵循第二种方法，我已经添加了 type="button".
I am developing a shopping cart using bootstrap(front end) and codeigniter. when add to cart item modal popup shows the details of added item. But my issue is page scrolls moves to top on modal popup.
<a href="#" id="edit_product" data-id="<?php echo $lat['product_id'];?>" name="id" data-text="Add To Cart" class="my-cart-b item_add add_to_cart">Add To Cart</a>
Ajax
$(".product_add").click(function(event) {
var currentId = globalId;
$.ajax({
type: 'POST',
url: '<?php echo site_url("ajax_controller1/product_add/'+currentId+'")?>',
data: { id:'1' },
success:function(response){
$("#cart_container1").html(response);
$("#myModal3").modal('show');
}
});/* Aajx */
});
Modal
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" style="overflow: visible;">
<div class="modal-dialog" role="document" style="overflow: visible;">
<div class="modal-content modal-info" style="overflow: visible;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" id="cart_container1">
</div>
</div>
</div>
</div>
I have done the following to overcome this issue
$('a.add_to_cart').click(function(e) {
e.preventDefault();
});
body.modal-open {
overflow: visible;
}
This is my demo website link
http://cableandmedia.com/ayurstore/
解决方案
I feel the culprit is href="#"
What you can do 2 things,
- Just remove
href="#"
Change <a> to `
<button type="button" id="edit_product" data-id="<?php echo $lat['product_id'];?>" name="id" data-text="Add To Cart" class="my-cart-b item_add add_to_cart">Add To Cart</button>
This should help you.
Notice that i have added type="button" if you are following 2nd approach.
这篇关于页面滚动到模态弹出窗口的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
