如何在单击按钮时显示模态
[英]How to display modal on button click
问题描述
I need to open a modal using button's onclick , but it is not succeeding. 
我需要使用按钮的onclick打开一个模式，但是没有成功。 Are there any errors in my code? 我的代码中有任何错误吗？
Add to Bag button 添加到购物袋按钮
<button class="btn btn-default" id="addtobag" onclick="addTobag();">Add to Bag</button><br>
Modal 模态
<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 功能
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 个解决方案
解决方案1
2 已采纳 2018-09-10 12:22:07
The problem is with "myBag" and its content. 问题在于"myBag"及其内容。
Here is mode details : 这是模式详细信息：
There are two condition you are checking 您正在检查两种情况
First 第一
if (request.readyState === 4 && request.status === 200)
and second 第二
if (request.responseText == "OK")
It means Model will only display when both condition are correct. 这意味着仅当两个条件均正确时才显示模型。
Create a text file myBag.txt apply OK (only OK in that file) 创建一个文本文件myBag.txt应用OK（该文件中只有OK）
Now use below code : 现在使用以下代码：
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>
Here make sure that "myBag.txt" is on the same path on the HTML file. 在这里，请确保“ myBag.txt”在HTML文件上的同一路径上。
Note file will be: 注释文件将是：
解决方案2
1 2018-09-10 12:12:08
You can try writing button code like 您可以尝试编写类似的按钮代码
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="addTobag();>Add to Bag </button>
and using modal like 并使用模态
<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
1 2018-09-10 12:14:24
try below code. 尝试下面的代码。 just added js and css libs for testing. 刚刚添加了js和css库进行测试。 see what you have missed in your code. 看看您在代码中错过了什么。 for test click on test button to open the same popup. 要进行测试，请单击“ 测试”按钮以打开相同的弹出窗口。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.