接收到来自ajax的结果后，打开一个弹出框

Question

我有一个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">&times;</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 !');
    }
});

谁能告诉我怎么做

Answer 1

您可以$("#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">&times;</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>