为什么不正确地使用我的模态?

时间:2017-03-26 16:19:41

标签: php jquery html bootstrap-modal

我有以下表单代码:

<div class="modal" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
   <form action="/admin/menuContent.php?id=<?php echo $menuId ?>" method="post">
       //few inputs...
        <div class="col-sm-1">
            <input id="editButton" class="btn btn-success editButton" type="submit" value="Save" data-toggle="modal" data-target="#myModal" role="button">
        </div>
        <div class="col-sm-1">
            <a href="/admin/menus.php" class="btn btn-default cancelButton">Cancel</a>
        </div>
    </form>

我的问题是,点击保存按钮后出现模态,但只是一秒或更短时间,可能会出现什么问题?谢谢你的帮助! :)

3 个答案:

答案 0 :(得分:0)

该错误只是因为在表单action.try中传递的url来确定这一点。无论你是否传递了正确的url。 我试过这个。

&#13;
&#13;
<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script>
    </head>
    <body>
    <div class="container">
     <div class="modal" id="myModal" role="dialog">
     <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;  </button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
            </div>
        </div>
      </div>
     </div>

        <div class="col-sm-1">
            <input id="editButton" class="btn btn-success editButton"  type="submit" value="Save" data-toggle="modal" data-target="#myModal"  role="button">
        </div>
        </div>
    
     </div>
    </body>
    </html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您不应该使用单个提交按钮触发表单提交和模式。当您触发提交按钮时,模态会消失并指向 menuContent.php 。您应该使用一些客户端程序来传递参数进入php。

答案 2 :(得分:0)

单击“保存”按钮时,表单已提交。 所以这是行动页面。 (动作= “/管理/ menuContent.php?ID =”)

请参考此问题并解决您的问题:https://www.w3schools.com/bootstrap/bootstrap_modal.asp