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將值傳遞給彈出模式

回答

相關問題