Question

问题：当我删除*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

Answer 1

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

Pobably

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

是你的答案。

Modal Fade Class停止模态启动

1 个答案: