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

时间:2018-09-10 11:57:26

标签: javascript ajax jsp bootstrap-modal

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

3 个答案:

答案 0 :(得分:2)

问题出在"myBag"及其内容上。

以下是模式详细信息:

您要检查的两个条件是

第一

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

第二

if (request.responseText == "OK")

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

创建文本文件myBag.txt应用确定(该文件中只有确定)

现在使用以下代码:

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

说明文件为:

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

尝试下面的代码。刚刚添加了$ as -o test.o test.s $ ld -o test test.o $ objdump -D test test: file format elf64-x86-64 Disassembly of section .note.gnu.property: 00000000004000e8 <.note.gnu.property>: 4000e8: 04 00 add $0x0,%al 4000ea: 00 00 add %al,(%rax) 4000ec: 10 00 adc %al,(%rax) 4000ee: 00 00 add %al,(%rax) 4000f0: 05 00 00 00 47 add $0x47000000,%eax 4000f5: 4e 55 rex.WRX push %rbp 4000f7: 00 01 add %al,(%rcx) 4000f9: 00 00 add %al,(%rax) 4000fb: c0 04 00 00 rolb $0x0,(%rax,%rax,1) 4000ff: 00 01 add %al,(%rcx) 400101: 00 00 add %al,(%rax) 400103: 00 00 add %al,(%rax) 400105: 00 00 add %al,(%rax) ... Disassembly of section .text: 0000000000401000 <_start>: 401000: 48 c7 c0 01 00 00 00 mov $0x1,%rax 401007: 48 c7 c3 ff ff ff 7f mov $0x7fffffff,%rbx 000000000040100e <L1>: 40100e: 48 39 d8 cmp %rbx,%rax 401011: 74 06 je 401019 <L2> 401013: 48 83 c0 01 add $0x1,%rax 401017: eb f5 jmp 40100e <L1> 0000000000401019 <L2>: 401019: 48 89 c3 mov %rax,%rbx 40101c: 48 c7 c0 01 00 00 00 mov $0x1,%rax 401023: cd 80 int $0x80 $ strip --remove-section=.note.gnu.property test strip: test: warning: empty loadable segment detected at vaddr=0x400000, is this intentional? $ objdump -D test test: file format elf64-x86-64 Disassembly of section .text: 0000000000401000 <.text>: 401000: 48 c7 c0 01 00 00 00 mov $0x1,%rax 401007: 48 c7 c3 ff ff ff 7f mov $0x7fffffff,%rbx 40100e: 48 39 d8 cmp %rbx,%rax 401011: 74 06 je 0x401019 401013: 48 83 c0 01 add $0x1,%rax 401017: eb f5 jmp 0x40100e 401019: 48 89 c3 mov %rax,%rbx 40101c: 48 c7 c0 01 00 00 00 mov $0x1,%rax 401023: cd 80 int $0x80 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');
  }