我有一个Ajax代码,可以正常工作并给出所需的结果。我想修改此代码,并希望当从ajax收到答复时,应该打开一个弹出/模态框。
我只要按一下按钮就能开启弹出式/模态框
<!-- Button trigger modal --> <button class="btn btn-primary" data-toggle="modal" data-target="#bsModal3"> Small Modal </button> <!-- Modal --> <div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <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="mySmallModalLabel">Modal title</h4> </div> <div class="modal-body"> Your content goes here... </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> </div> </div>
但是不知道如何在ajax中自动打开它。
这是我的ajax代码
$.ajax({ type: 'post', url: 'test2.php', dataType: 'json', data: { txt: txtbox, hidden: hiddenTxt }, cache: false, success: function (returndata) { if (returndata[4] === 1) { // want to load a popup box here } else { // other code } }, error: function () { console.error('Failed to process ajax !'); } });
谁能告诉我怎么做
您可以$("#bsModal3").modal('show');在结果中使用。
$("#bsModal3").modal('show');
进一步了解模态方法
$.ajax({ type: 'post', url: 'test2.php', dataType: 'json', data: { txt: txtbox, hidden: hiddenTxt }, cache: false, success: function(returndata) { if (returndata[4] === 1) { $("#bsModal3").modal('show'); } else { // other code } }, error: function() { console.error('Failed to process ajax !'); } }); <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <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.5/js/bootstrap.min.js"></script> <!-- Modal --> <div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <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="mySmallModalLabel">Modal title</h4> </div> <div class="modal-body"> Your content goes here... </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> </div> </div>