我希望你一切都好！
我有一个我真的无法解决的问题。我有以下脚本，它使用引导程序在"空白"页面上工作：
索引.php
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Test</title>
<link rel="stylesheet" href="css/jquery.modal.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- load bootstrap via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- load jquery via CDN -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.modal.js"></script>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.form.min.js"></script>
<script src="js/jquery.reveal.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
url: "include/form_process.php", // where to submit form to
type: "post", // submit method
dateType: "html", // returned dataType
success: showResponse // function to call on successful form submittion
};
// bind form using 'ajaxForm'
$('#createForm').ajaxForm(options);
});
function showResponse(responseText) {
console.log('success');
$('#main-wrapper').prepend(responseText); // prepend the modal to #wrapper dib
//$('#mailSetupForm')[0].reset();
// display modal
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: false, // if you click background will modal close?
//dismissmodalclass: 'close' // the class of a button or element that will close an open modal
dismissmodalclass: 'modal-btn' // the class of a button or element that will close an open modal
});
}
</script>
</head>
<body>
<div class="col-sm-6 col-sm-offset-2" style="margin-left: 0%;">
<div id="main-wrapper" class="subpage">
<div class="container">
<div class="row">
<div class="12u skel-cell-important">
<!-- Content -->
<article class="first last">
<h1>Test</h1>
<p>
<form action="" method="POST" id="createForm">
<!-- NAME -->
<div id="name-group" class="form-group">
<label for="name">First input</label>
<input type="text" class="form-control" name="input1" placeholder="First input" style="width: 400px; max-width: 100%">
<!-- errors will go here -->
</div>
<!-- EMAIL -->
<div id="email-group" class="form-group">
<label for="email">Second input</label>
<input type="text" class="form-control" name="input2" placeholder="Second input" style="width: 400px; max-width: 100%">
<!-- errors will go here -->
</div>
<!-- SUPERHERO ALIAS -->
<div id="superhero-group" class="form-group">
<label for="superheroAlias">Third input</label>
<input type="text" class="form-control" name="input3" placeholder="Third input" style="width: 400px; max-width: 100%">
<!-- errors will go here -->
</div>
<br>
<button type="submit" class="btn btn-success">DO <span class="fa fa-arrow-right"></span></button>
</form>
</p>
</article>
</div>
</div>
</div>
</div>
</div>
</body>
form_process.php
<?php
$clientLimit = 10;
//$chanNameMin = 4;
if (!$_POST['input1'])
{
echo <<<HTML
<div id="modal">
<div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
<div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
<div class="modal-inner">
<div class="modal-title">
<h3>Error!</h3>
<a class="modal-close-btn"></a>
</div>
<div class="modal-text">
Input1 not entered
</div>
<div class="modal-buttons">
<a class="modal-btn btn-light-red" id="close">Close</a>
</div>
</div>
</div>
</div>
</div>
HTML;
}elseif (!$_POST['input2'])
{
echo <<<HTML
<div id="modal">
<div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
<div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
<div class="modal-inner">
<div class="modal-title">
<h3>Error!</h3>
<a class="modal-close-btn"></a>
</div>
<div class="modal-text">
input2 not entered
</div>
<div class="modal-buttons">
<a class="modal-btn btn-light-red" id="close">Close</a>
</div>
</div>
</div>
</div>
</div>
HTML;
}elseif (!$_POST['input3'])
{
echo <<<HTML
<div id="modal">
<div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
<div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
<div class="modal-inner">
<div class="modal-title">
<h3>Error!</h3>
<a class="modal-close-btn"></a>
</div>
<div class="modal-text">
input3 not entered
</div>
<div class="modal-buttons">
<a class="modal-btn btn-light-red" id="close">Close</a>
</div>
</div>
</div>
</div>
</div>
HTML;
}elseif ($_POST['input3'] > $clientLimit)
{
echo <<<HTML
<div id="modal">
<div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
<div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
<div class="modal-inner">
<div class="modal-title">
<h3>Error!</h3>
<a class="modal-close-btn"></a>
</div>
<div class="modal-text">
Max input3 is 10
</div>
<div class="modal-buttons">
<a class="modal-btn btn-light-red" id="close">Close</a>
</div>
</div>
</div>
</div>
</div>
HTML;
}else{
?>
<div id="modal">
<div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
<div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-success modal-size-normal">
<div class="modal-inner">
<div class="modal-title">
<h3>IT WORKS!</h3>
<a class="modal-close-btn"></a>
</div>
<div class="modal-text">
The form is submitted. YEY
</div>
<div class="modal-buttons">
<a class="modal-btn btn-light-green" id="close">Close</a>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
我之前一直在 JQuery 1.7.1 和 jq171 = jQuery.noConflict（ true ）; 中使用过这个脚本，但是在使用引导程序和 JQuery 2.0.3 之后，我不再需要noConflict了。
现在到我的问题...我已经下载了一个测试管理模板，它使用Bootstrap v3.3.6和jQuery v1.11.1。在此之后，脚本将不再工作。页面刷新，它不应该这样做，并且模式不显示。
有人可以告诉我出了什么问题吗？我现在的头只是旋转。找不到解决方案...
更新：我做了一个新剧本，所以这个案子结束了！
这是新脚本。更改了提交方法和显示来自"cform_Process.php"的响应的方法。现在我得到了我想要的回应:)
$(document).ready(function () {
var options = {
url: "intCall/cform_Process.php", // File to submit the form to
type: "GET", // Submit method. POST or GET
dateType: "html", // How to return data. JSON, HTML or TEXT
success: showResponse // Function to call on successful form submittion
};
// Bind to form ID using 'ajaxForm'
$('#createForm').ajaxForm(options);
});
function showResponse(responseText) {
console.log('success');
$('#main-wrapper').find('.CrForm_result').html(response);
}