Gum*_*lar 1 html javascript php bootstrap-modal
我创建了一个动态表，在该表中我有一个应该触发弹出模式的链接。
我尝试使用“onclick”将值传递给模式弹出窗口，但该值仍然没有显示在模式弹出窗口中
这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css">
<link href="../libraries/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="../libraries/css/jquery-ui.css">
<script src="../libraries/js/jquery-1.10.2.js"></script>
</head>
<?php
$sql="select * from tbl_company";
$query=mysql_query($sql);
while($row=mysql_fetch_assoc($query)){
$code=$row['code'];
$name=$row['name'];
?>
<span id="myBtn" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="getCompanyCode('<?php echo $code;?>','<?php echo $name;?>')"><a href="javascript:void(0)"><img src="../images/edit.png" style="width:20px;"></a></span>
<?php
}
?>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"><a href="javascript:void(0)">X</a></span>
<input id="company" name="company" type="text" value="" readonly></td>
<input id="codes" name="codes" type="text" value="">
</div>
</div>
<script>
function getCompanyCode(str,nm) {
alert(str,nm);
var val_name = nm;
var val_code = str;
document.getElementById("company").value = val_name;
document.getElementById("codes").value = val_code;
}
</script>
<script type="text/javascript">
// 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 on 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";
}
}
</script>
要打开模态窗口，您应该使用data-toggle="modal"和href。如果不是<a>，您可以使用data-target：
data-toggle="modal" data-target="#exampleModal"\n要将唯一值传递给模态，您需要使用data-*属性。可以将其提供给模态处理程序，如下所示：
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>\n<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>\n<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>\n接下来的事情是，您需要处理自定义输入。显示模式窗口后，您需要执行一些操作。为此，一旦显示模式窗口，您需要分配一个事件处理程序：
\n\n// Execute something when the modal window is shown.\n$(\'#exampleModal\').on(\'show.bs.modal\', function (event) {\n var button = $(event.relatedTarget); // Button that triggered the modal\n var recipient = button.data(\'whatever\'); // Extract info from data-* attributes\n // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).\n // Update the modal\'s content. We\'ll use jQuery here, but you could use a data binding library or other methods instead.\n var modal = $(this);\n modal.find(\'.modal-title\').text(\'New message to \' + recipient);\n modal.find(\'.modal-body input\').val(recipient);\n});\n您的代码的问题：
\n\nid是犯罪行为。请勿重复使用，id因为它们是独一无二的。data-toggle给<a>标签。data-*。工作片段
\n\ndata-toggle="modal" data-target="#exampleModal"\n<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>\n<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>\n<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>\n请将您的代码与上面的代码映射。您不需要更改任何其他值。方法就<span>完成了。