我创建了一个Web应用程序，其功能之一是列出与特定搜索匹配的产品。 但是现在我希望每个产品旁边都有一个按钮，当按下它时会打开一个带有更大图像和更多细节的模态框。 我知道如何创建一个模态框并使其成功运行。
我的问题是：我将如何动态创建按钮，以便它显示在每个搜索结果旁边？每个按钮都必须不同。
<?php //connect to DB
$db = mysqli_connect('localhost','root','notactualpassword','bnh2012')
or die('Error connecting to MySQL server.');
?>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<html>
<head>
</head>
<body>
<h2>Pop-up Test</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Press Me</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="/webERP/companies/bnh2012/part_pics/PG219M.jpg" alt="Test Belt" style="width:304px;height:228px;">
<p>This is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long description</p>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您可以通过动态类名实现。类名可以与所有模型和按钮相同。
$(function(){
// Get the modal
var modal = $('div.myModal');
// Get the button that opens the modal
var btn = $("button.myBtn");
// Get the <span> element that closes the modal
var span = $(".close");
// When the user clicks the button, open the modal
btn.on('click',function() {
modal.show();
});
// When the user clicks on <span> (x), close the modal
span.on('click',function() {
modal.hide();
});
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
});/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<h2>Pop-up Test</h2>
<!-- Trigger/Open The Modal -->
<button class="myBtn">Press Me</button>
<!-- The Modal -->
<div class="modal myModal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>This is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long description</p>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
Bootstrap允许您创建动态按钮。有关详细信息，请参阅此链接。
http://getbootstrap.com/javascript/#modals
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-body #image').attr('src',recipient)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img src="http:placehold.it/250x250?text=first image" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Test 1</p>
<p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="http://placehold.it/250x250?text=first image">Model</button></p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img src="http:placehold.it/250x250?text=second image" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Test 2</p>
<p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="http://placehold.it/250x250?text=second image">Model</button></p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img src="http:placehold.it/250x250?text=thired image" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Test 3</p>
<p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="http://placehold.it/250x250?text=thired image">Model</button></p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<img src="" id="image">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>