我试图在ajax成功中成功地将插入记录显示为模式弹出,它试图像阴影效果一样出现在屏幕上,并且什么都不会消失。
我的情态是,
<!--Modal PopUp-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header alert alert-success">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">@Resource.InfromationDialog</h4>
</div>
<div class="modal-body">
<p class="success-message">@Resource.PrompSuccess </p>
</div>
<div class="modal-footer">
<button class="btn btn-success delete-confirm">@Resource.Ok</button>
@*<button class="btn btn-default" data-dismiss="modal">@Resource.Cancel</button>*@
</div>
</div>
</div>
</div>
这是我的ajax,
$("#create").click(function(e){
var myModel =
{
"TribeName": $('#TribeName').val()
};
var jsonToPost = JSON.stringify(myModel);
$.ajax({
url: '/Home/Create/',
async: true,
processData: false,
data: jsonToPost,
type: 'post',
contentType: 'application/json; charset=utf-8',
success: function (data) {
if (data == true) {
$('#myModal').modal('show');
}
},
error: function (err) {
alert('error');
}
});
})
为什么它只是闪烁的阴影而不是消失而不显示弹出窗口
编辑:
这里是#create
,
<input type="submit" id="create" value="@Resource.Create" class="btn btn-primary" />
嗯,由于我无权访问您的服务器,因此我将在此示例中模拟ajax调用。
HIH
$("#create").click(function(e){
var myModel = {
"TribeName": $('#TribeName').val()
};
var jsonToPost = JSON.stringify(myModel);
console.log('Sending post request...')
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts',
async: true,
processData: false,
data: jsonToPost,
type: 'post',
contentType: 'application/json; charset=utf-8',
success: function (data) {
console.log(data)
//in this case data is {"id": 101}, so I have to modify the IF a bit
//if (data == true) {
if (data.id == 101) {
$('#myModal').modal('show');
}
},
error: function (err) {
console.log('error', err.status);
}
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<input type="submit" id="create" value="@Resource.Create" class="btn btn-primary" />
<!--Modal PopUp-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header alert alert-success">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">@Resource.InfromationDialog</h4>
</div>
<div class="modal-body">
<p class="success-message">@Resource.PrompSuccess </p>
</div>
<div class="modal-footer">
<button class="btn btn-success delete-confirm">@Resource.Ok</button>
@*<button class="btn btn-default" data-dismiss="modal">@Resource.Cancel</button>*@
</div>
</div>
</div>
</div>