Question

我创建了一个动态表，在该表中我有一个链接，它应该触发一个弹出模式。

我试图将值传递给模态弹出窗口＆＃34; onclick＆＃34;，但该值仍未在模态弹出窗口中显示

这是我的代码

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

Answer 1

要打开模态窗口，您应该使用data-toggle="modal"和href。如果不是<a>，则可以改为使用data-target：

data-toggle="modal" data-target="#exampleModal"

要将唯一值传递给模态，您需要使用data-*属性。这可以像这样给出模态处理程序：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

接下来就是，您需要处理自定义输入。一旦显示模态窗口，您需要执行一些操作。为此，一旦显示模态窗口，您需要分配一个事件处理程序：

// Execute something when the modal window is shown.
$('#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-title').text('New message to ' + recipient);
  modal.find('.modal-body input').val(recipient);
});

您的代码存在的问题：

分配具有相同id的多个元素是犯罪行为。不要重复使用id，因为它们是唯一的。
您需要将data-toggle分配给<a>代码。
您应该通过data-*属性传递属性。

工作代码段

$(function () {
  $('#myModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var code = button.data('code'); // Extract info from data-* attributes
    var company = button.data('company'); // 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('#code').val(code);
    modal.find('#company').val(company);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" class="btn btn-info btn-lg" data-toggle="modal" data-code="code" data-company="company name">
  <img src="../images/edit.png" style="width:20px;">
</a>

<div class="modal fade bs-example-modal-sm" tabindex="-1" id="myModal">
  <div class="modal-dialog modal-sm">
    <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="mySmallModalLabel">Codes &amp; Company</h4>
      </div>
      <div class="modal-body">
        <input type="text" id="code" readonly />
        <input type="text" id="company" readonly />
      </div>
    </div>
  </div>
</div>

请使用上面的代码映射您的代码。您无需更改任何其他值。就像<span>完成一样。

Onclick将值传递给弹出模式

1 个答案: