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

Question

我需要使用按钮的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();
}

Answer 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文件上的同一路径上。

注释文件将是：

Answer 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>

Answer 3

尝试下面的代码。 刚刚添加了js和css库进行测试。 看看您在代码中错过了什么。 要进行测试，请单击“ 测试”按钮以打开相同的弹出窗口。

  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>

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

问题描述

3 个解决方案

解决方案1
2 已采纳 2018-09-10 12:22:07

解决方案2
1 2018-09-10 12:12:08

解决方案3
1 2018-09-10 12:14:24

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2018-09-10 12:22:07

解决方案2 1 2018-09-10 12:12:08

解决方案3 1 2018-09-10 12:14:24

解决方案1
2 已采纳 2018-09-10 12:22:07

解决方案2
1 2018-09-10 12:12:08

解决方案3
1 2018-09-10 12:14:24