引导模态消失

Question

I am having issues creating a module where it displays if the submission is valid (based on factors outside of the code- ex. the length of a string is acceptable). 我在创建一个模块时遇到问题，该模块将在其中显示提交是否有效（基于代码外的因素，例如字符串的长度是可接受的）。

When everything passes the test submits and then the modal pops up but disappears in about .5 seconds. 当一切都通过测试后，提交，然后模态弹出，但在约0.5秒后消失。 Is there a way to make it stay longer? 有没有办法让它停留更长的时间？

<!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

Load jquery(.min).js before bootstrap(.min).js . 在bootstrap(.min).js之前加载jquery(.min).js bootstrap(.min).js 。
As a rule of thumb, don't expect files from different versions of the same library/plugin to work well together. 根据经验，不要期望来自同一库/插件的不同版本的文件可以很好地协同工作。 You are using Bootstrap .css from v.3.7.7 and .js from version v3.1.0 . 您正在使用v.3.7.7版本的Bootstrap .css和v3.1.0版本的.js 。

Working example: 工作示例：

 <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>

As you can see, I'm using your code in the above example, linking the required dependencies in their correct order and the modal doesn't go away. 如您所见，我在上面的示例中使用了您的代码，以正确的顺序链接了所需的依赖项，并且模态不会消失。
If this doesn't help you, you'll need to reproduce the bug here so we could pinpoint its source. 如果这样做没有帮助，您需要在此处重现该错误，以便我们查明其来源。

Edit, based on addition to question: Your modal does not disappear. 根据以下问题进行编辑：您的模态不会消失。 It is dumped by browser, together with the page, because you are submitting a form simultaneously with displaying the modal. 它是由浏览器与页面一起转储的，因为您要在提交表单的同时显示模式。 Submitting the form causes your page to refresh the page in its entirety. 提交表单会使您的页面刷新整个页面。 You need to: 你需要：

Prevent conventional form submission: 阻止常规表单提交：

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

send the data async (via $.ajax() ) and parse the result into your existing page. 发送数据异步（通过$.ajax() ）并将结果解析到您现有的页面中。
For help on how to do that, see this question - and its answers. 有关如何执行此操作的帮助，请参阅此问题及其答案。

Answer 2

Below is the solution with the explanation. 以下是带有说明的解决方案。

HTML Form Submission has a set process that cannot be modified. HTML表单提交具有无法修改的设置过程。 We can stop the default form submission action and use our script instead. 我们可以停止默认的表单提交操作，而改用我们的脚本。

HTML Form Submission Process HTML表单提交过程

HTML Form has an Action file defined with the form itself in action along with method and other attributes. HTML表单与形式本身定义的操作文件action连同method和其他属性。

This ensures that once the form is submitted, the browser will move to the action file and process based on the HTML Form Input values. 这样可以确保一旦提交表单，浏览器将移动到操作文件并根据HTML表单输入值进行处理。 Since the browser is moving away from the Form page, therefore any UI object on the Form page will end immediately. 由于浏览器正在远离“表单”页面，因此“表单”页面上的任何UI对象都将立即结束。

In your case, you are not supposed to move away from the page. 就您而言，您不应该离开页面。 Instead you have to prevent the default Form Submit action and use Ajax call to process user input via an external file and then show the result. 相反，您必须阻止默认的“表单提交”操作，并使用Ajax调用通过外部文件处理用户输入，然后显示结果。 Below is the code that works and also displays the entered Username in the Modal Title. 以下是有效的代码，并且还在模式标题中显示了输入的用户名。

<!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>

Note that I have used <span id="username_value"> to display the entered text in the middle of an HTML text. 请注意，我已经使用<span id="username_value">在HTML文本中间显示输入的文本。

Below is the code of external PHP file that you can use to process data entered. 下面是可用于处理输入数据的外部PHP文件的代码。 Which means, the modal will only show once the entry is processed successfully. 这意味着，仅在成功处理条目后才会显示模式。

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

    echo $username_value;
  }
?>

Hope this helps. 希望这可以帮助。

引导模态消失

问题描述

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