我尝试在提交J查询步骤表单后显示模态。但有些时候模态会立即消失，有时也不会出现。
以下代码在SO 上的在线模拟器上正常运行，并且模态显示完美。 但我的浏览器上没有出现模式。
$(document).ready(function() {
function adjustIframeHeight() {
var $body = $('body'),
$iframe = $body.data('iframe.fv');
if ($iframe) {
// Adjust the height of iframe
$iframe.height($body.height());
}
}
// IMPORTANT: You must call .steps() before calling .formValidation()
$('#student_questions')
.steps({
headerTag: 'h2',
bodyTag: 'section',
autoFocus: true,
enableContentCache: true,
transitionEffect: 'fade',
transitionEffectSpeed: 170,
onStepChanged: function(e, currentIndex, priorIndex) {
// You don't need to care about it
// It is for the specific demo
adjustIframeHeight();
},
// Triggered when clicking the Previous/Next buttons
onStepChanging: function(e, currentIndex, newIndex) {
var fv = $('#student_questions').data('formValidation'), // FormValidation instance
// The current step container
$container = $('#student_questions').find('section[data-step="' + currentIndex +'"]');
// Validate the container
fv.validateContainer($container);
var isValidStep = fv.isValidContainer($container);
if (isValidStep === false || isValidStep === null) {
// Do not jump to the next step
return false;
}
return true;
},
// Triggered when clicking the Finish button
onFinishing: function(e, currentIndex) {
var fv = $('#student_questions').data('formValidation'),
$container = $('#student_questions').find('section[data-step="' + currentIndex +'"]');
// Validate the last step container
fv.validateContainer($container);
var isValidStep = fv.isValidContainer($container);
if (isValidStep === false || isValidStep === null) {
return false;
}
return true;
},
onFinished: function(e, currentIndex) {
// Uncomment the following line to submit the form using the defaultSubmit() method
$('#student_questions').formValidation('defaultSubmit');
// For testing purpose
$('#welcomeModal').modal();
}
})
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// This option will not ignore invisible fields which belong to inactive panels
exclude: ':disabled',
fields: {
subject_name: {
validators: {
notEmpty: {
message: 'Please Provide Subject Name'
}
}
},
chapter_name: {
validators: {
notEmpty: {
message: 'Please Provide Chapter Name'
}
}
},
qtype_name: {
validators: {
notEmpty: {
message: 'Please Provide Question Type Name'
}
}
}
}
});
});.wizard .content {
min-height: 100px !important;
width: 74%;
}
.wizard .content > .body {
width: 100% !important; !important; !important; !important;
height: auto !important; !important; !important;
padding: 15px !important; !important;
position: relative !important;
}
.wizard > .actions {
width: 74%;
}<html>
<head>
<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.2/js/bootstrap.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script src="http://formvalidation.io/vendor/jquery.steps/js/jquery.steps.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://formvalidation.io/vendor/jquery.steps/css/jquery.steps.css" rel="stylesheet"/>
<link href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<h1>Now you are in Study section</h1>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<!--Form-->
<form id="student_questions" method="post" class="form-horizontal">
<h2>Choose Subject</h2>
<section data-step="0">
<div class="form-group">
<div class="col-md-2"></div>
<label class="col-md-3 control-label">Subject Name: </label>
<div class="col-md-3">
<select class="form-control" name="subject_name" id="subject_name">
<option value="">Select Subject</option>
<option value="e">English</option>
</select>
</div>
</div>
</section>
<h2>Choose Chapter</h2>
<section data-step="1">
<div class="form-group">
<div class="col-md-2"></div>
<label class="col-md-3 control-label">Select Chapter: </label>
<div class="col-md-3">
<select class="form-control" name="chapter_name" id="chapter_name">
<option value="">Select Chapter</option>
<option value="e">English</option>
</select>
</div>
</div>
</section>
<h2>Choose type of questions</h2>
<section data-step="2">
<div class="form-group">
<div class="col-md-2"></div>
<label class="col-md-3 control-label">Select Type of Question</label>
<div class="col-md-3">
<select class="form-control" name="qtype_name" id="qtype_name">
<option value="">Select Questions Types</option>
<option value="e">English</option>
</select>
</div>
</div>
</section>
</form>
<!--End Form-->
</div>
</div>
</div>
<div class="modal fade" id="welcomeModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Completed...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>