如何在按钮单击时显示模态答案

【问题标题】：How to display modal on button click如何在按钮单击时显示模态
【发布时间】：2018-09-10 11:57:26
【问题描述】：

我需要使用按钮的onclick 打开一个模式，但它没有成功。我的代码有错误吗？

添加到购物袋按钮

<button class="btn btn-default" id="addtobag" onclick="addTobag();">Add to Bag</button><br>

模态

<div class="modal fade" id="addtobagmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                //mycode
            </div>
            <div class="modal-body">
                //mycode
            </div>
            <div class="modal-footer">
                //mycode
            </div>
        </div>
    </div>
</div>

功能

function addTobag() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            if (request.responseText == "OK") {
                $('#addtobagmodal').modal('show');
            } else {
                alert('error');
            }
        }
    };
    request.open("GET", "myBag", true);
    request.send();
}

【问题讨论】：

request.responseText = "OK" 我假设你打算 ==
如果在没有XMLHttpRequest 的情况下放置$('#addtobagmodal').modal('show'); 是否有效？
@gaetanoMthanx 先生，我的错误。我编辑了它
@benjaminc 我仍然收到错误警报。
@PoornaSenaniGamage 检查 ajax 响应，是 200 吗？

标签： javascript ajax jsp bootstrap-modal

【解决方案1】：

问题在于"myBag" 及其内容。

这里是模式详情：

您正在检查两个条件

第一个

if (request.readyState === 4 && request.status === 200)

第二个

if (request.responseText == "OK")

这意味着模型只有在两个条件都正确时才会显示。

创建一个文本文件myBag.txt应用OK（仅在该文件中OK）

现在使用下面的代码：

function addTobag() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            if (request.responseText == "OK") {
                $('#addtobagmodal').modal('show');
            } else {
                alert('error');
            }
        }
        else{
            alert('myBag file not found,  request.readyState = ' + request.readyState);
        }

    };
    request.open("GET", "myBag.txt", true);
    request.send();
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<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.7/js/bootstrap.min.js"></script>

<div class="modal fade" id="addtobagmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                //mycode
            </div>
            <div class="modal-body">
                //mycode
            </div>
            <div class="modal-footer">
                //mycode
            </div>
        </div>
    </div>
</div>

<button class="btn btn-default" id="addtobag" onclick="addTobag();">Add to Bag</button><br>

在此确保“myBag.txt”与 HTML 文件的路径相同。

注释文件将是：

【讨论】：

感谢您的解释

【解决方案2】：

您可以尝试编写类似的按钮代码

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="addTobag();>Add to Bag </button>

并使用模态，如

   <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">
<div class="modal-content">
            <div class="modal-header">
                //mycode
            </div>
            <div class="modal-body">
                //mycode
            </div>
            <div class="modal-footer">
                //mycode
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

试试下面的代码。刚刚添加了js 和css 库进行测试。查看您在代码中遗漏的内容。要进行测试，请单击 test 按钮打开相同的弹出窗口。

  function addTobag() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
      if (request.readyState === 4 && request.status === 200) {
        if (request.responseText = "OK") {
          $('#addtobagmodal').modal('show');
        } else {
          alert('error');
        }
      }
    };
    request.open("GET", "myBag", true);
    request.send();
  }

  function test() {
    $('#addtobagmodal').modal('show');
  }

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
  </head>
  <body>
    <button class="btn btn-default" id="addtobag" onclick="addTobag();">Add to Bag</button><br>
    <button class="btn btn-default" id="addtobag" onclick="test();">Test modal only</button><br>

  <div class="modal fade" id="addtobagmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          //mycode
        </div>
        <div class="modal-body">
          //mycode
        </div>
        <div class="modal-footer">
          //mycode
        </div>
      </div>
    </div>
  </div>

</body>
</html>

【讨论】：