Question

我试图显示或显示一个模式，如果电子邮件成功发送或者在提交表单时发生了其他事情，但没有运气，我尝试了很多方法但没有...我尝试了很多东西但没有工作，最后一个我试过是在确认电子邮件已发送但是当我使用此代码执行此操作时从php调用它

$(document).ready(function(){
    $("#myBtn3").click(function(){
        $("#mymodal").modal({backdrop: "static"});
    });
});

它表示$ $未定义：'（我不知道还能做什么

像这样它不会做我想要它做的事情。（片段测试）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <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.2.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">

  <button type="button" class="btn btn-info btn-md" id="myBtn3">click me</button>

 <div class="modal fade" id="mymodal" role="dialog">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header" style="padding:35px 50px;"> <h4 class="mh4"> Hey there! </h4>
       </div>
          <div class="modal-body" style="padding:40px 50px;">
         <p align=justify>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla</p> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
        </div>
      </div>
     </div>
  </div>
</div>
 
<script>
$(document).ready(function(){
    $("#myBtn3").click(function(){
        $("#mymodal").modal({backdrop: "static"});
    });
});
</script>
</body>
</html>

{{1}}

Answer 1

我认为模态被认为是一个单独的窗口，所以你试图将变量传递到另一个窗口，这将导致你的未定义错误。您需要在模态关闭之前执行任何代码。或使用推送服务。我会对您的服务器执行ajax POST，然后使用该响应更新页面。的XMLHttpRequest

Answer 2

您包括 Jquery Version3 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

虽然Bootstrap 3支持Jquery版本gretter而不是1.9.0但小于3.0.x. 您可以在浏览器控制台中检查此错误。因此，尝试使用包含jquery 1.9.1或更高版本2.2.4将是一个不错的选择。

您可以尝试从PHP脚本中获取数据

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <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/1.9.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">

  <button type="button" class="btn btn-info btn-md" id="myBtn3" onclick="DoYourAction()">click me</button>

 <div class="modal fade" id="mymodal" role="dialog">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header" style="padding:35px 50px;"> <h4 class="mh4"> Hey there! </h4>
       </div>
          <div class="modal-body" style="padding:40px 50px;">
         <p align=justify>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla</p> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
        </div>
      </div>
     </div>
  </div>
</div>
 
<script>
function DoYourAction() {
    $.ajax({
        type: 'get',
        url: 'https://jsonplaceholder.typicode.com',
		headers: {"Access-Control-Allow-Origin": "*"},
        /* Your URL from which you are getting data */
        data: { /* Put your parameers that you are sending to the Action */
            "param1": 'valueForparam1',
            'param2': 'valueForparam1'
        },
        success: function (data) {
            /*
             * On Success Show your modal
             */
           $('#mymodal').modal('show');
        },
        error: function (errors) {
            /*
             * If Error arrived, you may see in your browser console!
             */
            console.log(errors);
        }
    });
}
</script>
</body>
</html>

＆＃13;

如果电子邮件成功发送，如何打开模式？

2 个答案: