引导模态消失

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

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

工作示例：

 <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() ）并将结果解析到您现有的页面中。
有关如何执行此操作的帮助，请参阅此问题及其答案。

Answer 2

以下是带有说明的解决方案。

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

HTML表单提交过程

HTML表单与形式本身定义的操作文件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;
  }
?>

希望这可以帮助。

引导模态消失

问题描述

2 个解决方案

解决方案1
2 2017-04-22 23:58:04

解决方案2
0 2017-04-23 20:58:08

引导模态消失

问题描述

2 个解决方案

解决方案1 2 2017-04-22 23:58:04

解决方案2 0 2017-04-23 20:58:08

解决方案1
2 2017-04-22 23:58:04

解决方案2
0 2017-04-23 20:58:08