模态淡入淡出类停止模态开始答案

【问题标题】：Modal Fade Class stops Modal Start模态淡入淡出类停止模态开始
【发布时间】：2015-11-17 18:17:57
【问题描述】：

问题：当我删除 *class="modal fade"* 时，我的代码可以正常工作，尽管按钮不起作用（我希望是 Class 问题导致代码出错）

注意事项：该代码旨在根据模式在页面加载时弹出。我已经包含了 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

【问题讨论】：

标签： jquery css .net

【解决方案1】：

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

大概

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

是你的答案。

【讨论】：

可能是正确的，但具有讽刺意味的是，这使它成为一个 jQuery 问题....不是 asp 问题，即在页面加载之前调用 jQuery。
但是确实如此，因为他用 asp 将脚本加入了队列，并且它应该在页面加载而不是页面创建时加入.. 如果 asp 有这样的功能。我是一名 PHP 开发人员。此外，无论过去多少年，我似乎都没有正确拼写 probable...
我把这个放在哪里，我在 $('#StartModal').modal('show'); 之前和之后都试过了。
我明白你的观点，虽然 OP 可以像你提到的那样将 function openModal() { $('#StartModal').modal('show'); } 更改为 $(function(){$('#StartModal').modal('show'); }) 并且完全避免调用该函数，因为他们希望它出现在加载时
删除 enque 脚本并用这段代码替换你的函数，它应该可以工作。