Onclick将值传递给弹出模式

我创建了一个动态表，并在该表中有一个应该触发弹出模式的链接。Onclick将值传递给弹出模式

我试图传递给模式弹出与“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>

来源

2016-12-27 Gumilar

为什么你使用如此糟糕的代码，搞乱了Bootstrap，jQuery和纯JavaScript？你之前使用过Bootstrap吗？ –

我仍在学习bootstrap和javascript，我试图从W3School学习材料，但我无法完全理解 – Gumilar

永远不要从W3School学习。这真的是过时了。对不起，使用这个词，但它确实是不好的。看到我的答案。我现在正在重写你的整个代码。 –

要打开模式窗口，您应该使用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>完成。

来源

2016-12-27 16:00:01

Onclick将值传递给弹出模式

回答

相关问题