时间戳

首页 > 解决方案 > 如何在按钮单击时显示模态

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

问题描述

我需要使用按钮打开一个模式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();
}

标签： javascriptajaxjspbootstrap-modal

解决方案

问题在于"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 文件的同一路径上。

注意文件将是：

推荐阅读