此处的相关页面： http://marcmurray.net/test_sites/cans/news.php
我一直在尝试在用户提交电子邮件后加载消息确认模式一段时间，但根本无法使其正常工作。
到目前为止，我已经尝试回显整个脚本，触发脚本，更改URL中的哈希并检查它，这在网站的其他区域有效。
在页面上添加警报和回显文本等功能工作正常，但是当我使用show方法时，它不起作用。这让我相信我要么错误地逃避字符，要么误解了模态的工作原理。 谁能看到我搞砸了？
PHP：
<?php
if(isset($_POST["submit"])) {
// Checking For Blank Fields..
if($_POST["vname"]==""||$_POST["vemail"]==""||$_POST["sub"]==""||$_POST["msg"]==""){
echo "Please fill out everything! We need to know who you are, and why you want to get in touch with us!";}
else
{
// Check if the "Sender's Email" input field is filled out
$email=$_POST['vemail'];
// Sanitize E-mail Address
$email =filter_var($email, FILTER_SANITIZE_EMAIL);
// Validate E-mail Address
$email= filter_var($email, FILTER_VALIDATE_EMAIL);
$emailConfirmed=$_POST['vemail'];
if (!$email){
echo "Don't forget to include your email adress! Otherwise we can't get back to you.";
}
else
{
$subject = $_POST['sub'];
$message = $_POST['msg'];
$headers = 'From:' . $emailConfirmed . "\r\n"; // Sender's Email
$headers .= 'Cc:' . $emailConfirmed . "\r\n"; // Carbon copy to Sender
// Message lines should not exceed 70 characters (PHP rule), so wrap it
$message = wordwrap($message, 70);
// Send Mail By PHP Mail Function
mail("marc.murray.92@gmail.com", $subject, $message, $headers);
echo "<script>$('#thankyouModal').modal('show')</script>";
};
}
}
?>
模式的HTML
<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
<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">Thank you for pre-registering!</h4>
</div>
<div class="modal-body">
<p>Thanks for getting in touch!</p>
</div>
</div>
</div>
</div>
编辑：更新的代码比初始问题更简单。
答案 0 :(得分：9)
不要先预先调用modal show方法，而是首先加载所有资源，然后调用modal show方法。
echo "<script>
$(window).load(function(){
$('#thankyouModal').modal('show');
});
</script>";
答案 1 :(得分：7)
而不是回显脚本，为什么不只是用javascript检测你的表单提交然后显示模态？
像
这样的东西$("form").on('submit', function(){
$('.modal').show();
})
（如果你正在使用JQuery）
答案 2 :(得分：2)
我在示例代码中看到的第一个问题是，在下面的代码中没有必要\ echo "<script> \。删除它
第二：你是否包括了对于boostrap模式所需的所有js和css文件？如果您不是，请使用以下代码行更新代码
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
最后没有触发事件来打开boostrap模态。添加以下代码以触发模态。
$(window).load(function(){
$('#myModal').modal('show');
});
最终代码：
echo "<script>
var newHTML = document.createElement ('div');
newHTML.innerHTML =
newHTML = document.createElement ('div');
newHTML.innerHTML = ' <div id=\"myModal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\"> <div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"></div>';
document.body.appendChild (newHTML);
$(window).load(function(){
$('#myModal').modal('show');
});
</script>";
希望这会有所帮助。
答案 3 :(得分：1)
也许这就是问题..
echo "<script>$('#thankyouModal').modal('show')</script>";
我会这样做....
$var = "<script>$(document).ready(function(){
$('#thankyouModal').modal('show')
});</script>";
然后在你的html模板上将它打印在你头脑中的右边部分。
使用您的选项并在脚本中添加$（document）.ready而不是认为可行...最后一个选项的问题是您将回显脚本但是jquery可能尚未完全加载并且它不会认出来的。
所以，我建议将它作为参数发送，然后打印出来。
如果你没有使用框架并且你很难传递参数，你可以考虑使用URL并执行类似project.com/result.php?submit=true
在您的前端，您将阅读该变量
喜欢
if(isset($_GET["submit"]) && ($_GET["submit"]) ){
//echo your modal script
}
答案 4 :(得分：1)
我发现.in（将不透明度设置为1）我认为应该由Bootstrap设置的类在提交表单后不显示。
$('.modal').show().addClass('in');
顺便说一下。你在控制台中有错误
$(...).parsley(...).on is not a function
答案 5 :(得分：1)
$('#thankyouModal').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
$('#thankyouModal').modal('show'); //Open the model
});
或您可以在表单提交后手动创建按钮，然后单击该按钮以打开模式。
$('#thankyouModal').click(function(e) {
e.preventDefault(); // don't submit multiple times
$("form").submit(); // use the native submit method of the form element
$('<button type="button" id="btnThankYou" class="hidden" data-toggle="modal" data-target="#thankyouModal">ThankYouButton</button>').appendTo('body');
//This will click the button and open the modal
$("#btnThankYou" ).trigger("click");
});
答案 6 :(得分：1)
正如xkcd149所说，如果你想在不重新加载的情况下在同一页面中加载模态，你应该使用AJAX请求：
将表单的onsubmit属性替换为发送请求数据的函数
window.onload = function() {
var forms = document.getElementsByTagName("form");
for(var f in forms) {
frm[f].onsubmit = xhr; // xhr is the function that sends the XHR
}
}
在上面使用的提交功能中，添加成功和错误回调：
function xhr(){
var client = new XMLHttpRequest();
...
client.onerror = xhrerr;
client.onreadystatechange = handler;
client.send(...);
...
}
如果返回的HTTP代码为200（或您想要/需要的任何内容），则成功函数应显示模态
function handler(){
if (this.readyState == 4 && this.status == 200) {
var widget = document.getElementById("modal-body");
// add content to the body of the modal
} else {
// manage error
}
}
答案 7 :(得分：1)
将此链接放在HEAD标记处：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
然后改变这个：
<script>$('#thankyouModal').modal('show')</script>
为：
$(document).ready(function(){
<script>$('#thankyouModal').modal('show')</script>
});
答案 8 :(得分：1)
package.json答案 9 :(得分：1)
您可以尝试
$('#thankyouModal').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
$('#thankyouModal').modal('show'); //Open the model
});
答案 10 :(得分：0)
也许您应该通过ajax发送表单，因此在提交活动后您无需刷新页面。
只要您不刷新页面，您的模态就会成功加载。
答案 11 :(得分：0)
<?php
if(isset($_POST["submit"])) {
// Checking For Blank Fields..
$checkpost = false;
if($_POST["vname"]==""||$_POST["vemail"]==""||$_POST["sub"]==""||$_POST["msg"]==""){
echo "Please fill out everything! We need to know who you are, and why you want to get in touch with us!";}
else
{
// Check if the "Sender's Email" input field is filled out
$email=$_POST['vemail'];
// Sanitize E-mail Address
$email =filter_var($email, FILTER_SANITIZE_EMAIL);
// Validate E-mail Address
$email= filter_var($email, FILTER_VALIDATE_EMAIL);
$emailConfirmed=$_POST['vemail'];
if (!$email){
echo "Don't forget to include your email adress! Otherwise we can't get back to you.";
}
else
{
$checkpost = true;
$subject = $_POST['sub'];
$message = $_POST['msg'];
$headers = 'From:' . $emailConfirmed . "\r\n"; // Sender's Email
$headers .= 'Cc:' . $emailConfirmed . "\r\n"; // Carbon copy to Sender
// Message lines should not exceed 70 characters (PHP rule), so wrap it
$message = wordwrap($message, 70);
// Send Mail By PHP Mail Function
mail("marc.murray.92@gmail.com", $subject, $message, $headers);
echo "<script>$('#thankyouModal').modal('show')</script>";
};
}
} ？＆GT;
in html
<?php if($checkpost){ ?>
<script>
$('.modal').show();
</script>
<?php } ?>
答案 12 :(得分：0)
我知道回答还为时已晚。但是希望它可以对其他人有所帮助。
以下代码对我有效，我使用的是Post-Redirect-Get模式。提交表单后打开模式。
@RunWith(SpringRunner.class)
@SpringBootTest
@AutoConfigureMockMvc
public class ApplicationTest {
@Autowired
private MockMvc mockMvc;
@Test
public void shouldReturnDefaultMessage() throws Exception {
this.mockMvc.perform(post("/manager/store-something")).andDo(print()).andExpect(status().isOk())
.andExpect(content().string(containsString("Hello World")));
}
}
答案 13 :(得分：0)
success: function(data)
{
$("#myModal").modal("show");
}