创建了一个 JavaScript 函数来动态创建和附加按钮。并在按钮“+添加新多维数据集”中调用它。 单击该按钮(+添加新多维数据集),它会动态创建按钮。 单击该动态创建的按钮时,我想要显示一个模式或一个 div。 我引用了一个生成弹出窗口的教程,但它似乎没有帮助。谁能帮忙。
var num = 1;
function myFunction() {
var btn = document.createElement("BUTTON");
btn.innerHTML = "Cube "+num;
btn.className = "sam";
document.body.appendChild(btn);
btn.onclick = function () {
alert(this.innerHTML);
}
num++;
}
.sam{
height:150px;
width:100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button class = "btn btn-primary" onclick="myFunction()">+ Add New Cubicle</button><br/>
最佳答案
看看这个片段。
var num = 1;
function myFunction() {
var btn = document.createElement("BUTTON");
btn.innerHTML = "Cube "+num;
btn.className = "sam";
btn.setAttribute("data-target","#myModal");
btn.setAttribute("data-toggle","modal");
document.body.appendChild(btn);
btn.onclick = function () {
//alert(this.innerHTML);
$("#myModal .customMsg").html("Msg for "+ this.innerHTML);
$("#myModal .modal-title").html(this.innerHTML)
}
num++;
}
.sam{
height:150px;
width:100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button class = "btn btn-primary" onclick="myFunction()">+ Add New Cubicle</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body customMsg">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
更新
添加了动态设置模态弹出窗口主体的代码
关于javascript - 为动态创建的按钮创建引导模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59640565/