Onclick將值傳遞給彈出模式

Question

我創建了一個動態表，並且在該表中有一個鏈接，該鏈接應觸發彈出模式。

而且我嘗試通過“ 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>

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 個解決方案

解決方案1
3 已采納 2016-12-27 16:00:01

Onclick將值傳遞給彈出模式

問題描述

1 個解決方案

解決方案1 3 已采納 2016-12-27 16:00:01

解決方案1
3 已采納 2016-12-27 16:00:01