Onclick将值传递给弹出模式

Question

I have created a dynamic table and in that table I have a link which should trigger a popup modal. 我创建了一个动态表，并且在该表中有一个链接，该链接应触发弹出模式。

And I have tried to pass the value to modal popup with "onclick", but the value still didn't show in the modal popup 而且我尝试通过“ onclick”将值传递给模式弹出窗口，但该值仍未在模式弹出窗口中显示

Here is my code 这是我的代码

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

To open a modal window, you should use data-toggle="modal" and href . 要打开模式窗口，应使用data-toggle="modal"和href 。 If it's not <a> , you can use data-target instead: 如果不是<a> ，则可以使用data-target代替：

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

To pass a unique value to the modal, you need to use data-* attributes. 要将唯一值传递给模式，您需要使用data-*属性。 This can be given to the modal handler like this: 可以将其提供给模态处理程序，如下所示：

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

The next thing is that, you need to handle the custom input. 接下来的事情是，您需要处理自定义输入。 Once the modal window is shown, you need to execute some stuff. 显示模态窗口后，您需要执行一些操作。 For that, you need to assign an event handler, once the modal window is shown: 为此，一旦显示模式窗口，您需要分配一个事件处理程序：

// 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);
});

The issues with your code: 您的代码存在的问题：

Assigning multiple elements with same id is a crime . 分配具有相同id多个元素是犯罪 。 Do not reuse id as they are unique. 不要重复使用id因为它们是唯一的。
You need to assign the data-toggle to the <a> tag. 您需要将data-toggle分配给<a>标记。
You should pass the attributes through data-* attributes. 您应该通过data-*属性传递属性。

Working Snippet 工作片段

 $(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>

Please map your code with the above code. 请使用以上代码映射您的代码。 You don't need to change any other values. 您不需要更改任何其他值。 Just the way <span> is done. 就是<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