个人中心
gpt4 book ai didi

jquery - 模态淡入淡出类停止模态开始

转载 作者：太空宇宙 更新时间：2023-11-04 02:46:46 25 4
gpt4 key购买 nike

问题:当我删除 *class="modal fade"* 我的代码在它出现的事实中起作用，尽管按钮不起作用(我希望这是错误代码的类问题)

注意事项:该代码旨在根据模式在页面加载时弹出。我已经包含了 aspx、.aspx.vb 的代码和“模态淡入淡出”的特定 CSS 代码。

代码:

.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Dashboard1.aspx.vb" Inherits="_Dashboard1" %>

<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">


    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" />

    <title>Title</title>

</head>
<body>
    <div class="container-fluid">

        <script type="text/javascript">
            function openModal() {
                $('#StartModal').modal('show');
            }
        </script>


        <div class="modal fade" id="StartModal" tabindex="-1" role="dialog" aria-labelledby="myStartModal">
            <div class="modal-dialog700" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3></h3>
                        <button type="button" class="Close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="x">Welcome</h4>
                    </div>

                    <div class="modal-body">

                        <p>Welcome to the Test.</p>

                        <div class="modal-footer">
                            <br />
                            <div class="modal-footer">
                                <br />
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Start</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    Some random text on the main page
</body>
</html>

.aspx.vb

Partial Class _Dashboard1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load


        '#####///Launch start script modal
        ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "Pop", "openModal();", True)
        '#####\\\Launch start script modal

    End Sub

End Class

CSS 代码示例 (bootstrap.min.css)

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

    .modal.fade .modal-dialog {
        -webkit-transition: -webkit-transform .3s ease-out;
        -o-transition: -o-transform .3s ease-out;
        transition: transform .3s ease-out;
        -webkit-transform: translate(0,-25%);
        -ms-transform: translate(0,-25%);
        -o-transform: translate(0,-25%);
        transform: translate(0,-25%);
    }

    .modal.in .modal-dialog {
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
    }

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

研究:

Bootstrap modal: class="modal fade" causing problems

Twitter bootstrap: modal fade

最佳答案

我确实相信这是一个 asp 问题而不是 jQuery 问题，因为最可能的答案是脚本在模态加载到页面之前触发~

可能是

$( document ).ready(function()
{
  $('#StartModal').modal('show');
});

就是你的答案。

关于jquery - 模态淡入淡出类停止模态开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33737091/

25 4 0
文章推荐： javascript - 在Nodewebkit环境中使用logger
文章推荐： node.js - 使用 Node.js 应用程序获取存储在 Bluemix Object Storage 容器中的图像的源 url
文章推荐： node.js - 响应式(Reactive)后端/响应式(Reactive)服务器架构
文章推荐： html - 如何使用 CSS 将内容保留在自己的栏中？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com