关闭模态并滚动到 div

编程入门 行业动态 更新时间:2024-10-28 16:17:01
本文介绍了关闭模态并滚动到 div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时送ChatGPT账号..

$("#contact-form").click(function() {$('html, body').animate({scrollTop: $("#contact-section").offset().top}, 2000);});

<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h3>标题</h3>

<div class="modal-body">文本

<div class="modal-footer"><button type="button" id="contact-form" class="btn btn-default pull-right glyphicon glyphicon-envelope">联系方式</button>

<div id="contact-section"><?php 需要 'contact.php';?>

当我点击联系时,引导模式按预期关闭,但没有滚动到联系部分,为什么?

解决方案

不要使用 data-dismiss="modal"

$("#contact-form").click(function() {
    $('html, body').animate({
        scrollTop: $("#contact-section").offset().top
    }, 2000);
});

<div class="modal fade" id="saModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>title</h3>
            </div>
            <div class="modal-body">
                text
            </div>
            <div class="modal-footer">
                <button type="button" id="contact-form" class="btn btn-default pull-right glyphicon glyphicon-envelope">Contact</button>
            </div>
        </div>
    </div>
</div>

<div id="contact-section">
<?php require 'contact.php'; ?>
</div>

When I click contact, The bootstrap modal closes as expected but doesn't scroll to contact section, why?

解决方案

Don't use the data-dismiss="modal"

<button type="button" id="contact-form" class="btn btn-default pull-right glyphicon glyphicon-envelope" >Contact</button> 

$("#contact-form").click(function() {
    $('#myModal').modal('hide');
    $('html, body').animate({
        scrollTop: $("#contact-section").offset().top
    }, 2000);
});

这篇关于关闭模态并滚动到 div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

更多推荐

[db:关键词]

本文发布于:2023-04-23 08:46:19,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:模态   div

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!