Question

我在创建模块时遇到问题，如果提交有效，则会显示该模块（基于代码之外的因素，可以接受字符串的长度）。

当一切都通过测试提交然后模态弹出但在大约0.5秒内消失。有没有办法让它停留更长时间？

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="faviconmoney.ico"/>
    <meta charset="utf-8">
    <title>Employee Info</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

<div>


    <ul class="nav nav-pills">
        <li role="presentation" class="active"><a href="#">Expenses</a></li>
        <li role="presentation"><a href="/UpdatePersonalData">Employee Data</a></li>
        <li role="presentation"><a href="logout">Logout</a></li>
    </ul>

    <hr />

</div>

<div>
    <form role="form" method="post" id="user">
        <div class="col-md-4">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
            </div>
            <div class="form-group">
                <label for="first name">First Name:</label>
                <input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
            </div>

            <div class="form-group">
                <label for="last name">Last Name:</label>
                <input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
            </div>


            <button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button>

        </div>
    </form>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Your changes have been submitted and updated!
                </h4>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

</body>
</html>

Answer 1

在jquery(.min).js之前加载bootstrap(.min).js。
根据经验，不要指望同一个库/插件的不同版本的文件能够很好地协同工作。您正在使用v.3.7.7中的Bootstrap .css和版本.js中的v3.1.0。

工作示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
        </button>
        <h4 class="modal-title" id="myModalLabel">
                        Your changes have been submitted and updated!
        </h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close
        </button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<a href="#myModal" data-toggle="modal" datatarget="#myModal" class="btn btn-default">Submit</a>

正如您所看到的，我在上面的示例中使用了您的代码，以正确的顺序链接所需的依赖项，并且模式不会消失。
如果这对您没有帮助，您需要在此处重现该错误，以便我们确定其来源。

编辑，基于问题的补充：您的模态不会消失。它由浏览器和页面一起转储，因为您在显示模式的同时提交表单。提交表单会导致您的页面完整地刷新页面。你需要：

阻止传统表单提交：

$('form#user').submit( function(e){
  e.preventDefault();
  // send your data here in an $.ajax() 
})

发送数据异步（通过$.ajax()）并将结果解析到现有页面有关如何执行此操作的帮助，see this question - 及其答案。

Answer 2

以下是解释的解决方案。

HTML表单提交具有无法修改的设置过程。我们可以停止默认表单提交操作并改为使用我们的脚本。

HTML表单提交流程

HTML表单在action中使用表单本身定义了一个Action文件以及method和其他属性。

这可确保在提交表单后，浏览器将移动到操作文件并根据HTML表单输入值进行处理。由于浏览器正在远离“表单”页面，因此“表单”页面上的任何UI对象都将立即结束。

在您的情况下，您不应该离开页面。相反，您必须阻止默认的表单提交操作并使用Ajax调用通过外部文件处理用户输入，然后显示结果。以下是有效的代码，并在模态标题中显示输入的用户名。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="faviconmoney.ico"/>
    <meta charset="utf-8">
    <title>Employee Info</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

<div>


    <ul class="nav nav-pills">
        <li role="presentation" class="active"><a href="#">Expenses</a></li>
        <li role="presentation"><a href="/UpdatePersonalData">Employee Data</a></li>
        <li role="presentation"><a href="logout">Logout</a></li>
    </ul>

    <hr />

</div>

<div>
    <form role="form" method="post" id="user">
        <div class="col-md-4">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
            </div>
            <div class="form-group">
                <label for="first name">First Name:</label>
                <input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
            </div>

            <div class="form-group">
                <label for="last name">Last Name:</label>
                <input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
            </div>


            <!-- <button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button> -->

            <button type="submit" class="btn btn-default" id="modelSubmit1">Submit</button>

        </div>
    </form>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Username Entered is <strong><span id="username_value">UserName</span></strong>.
                </h4>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<script type="text/javascript">
    $('form#user').submit( function(e){
        e.preventDefault();

      var username = $('#username').val();
        var dataString = "username="+username;

        // $('#myModal').modal({ show: false});

        $.ajax({
            type: "POST",
            url: "form-submission.php", // Name of the php files
            data: dataString,
            success: function(html)
            {
                $("#username_value").html(html);

                $('#myModal').modal('show');
            }
        });
    });
</script>

</body>
</html>

请注意，我已使用<span id="username_value">在HTML文本中间显示输入的文本。

以下是可用于处理输入数据的外部PHP文件的代码。这意味着，只有在条目成功处理后才会显示模态。

<?php
  if ($_POST) {
    $username_value = $_POST['username'];

    echo $username_value;
  }
?>

希望这有帮助。

bootstrap模态消失

2 个答案: