ポップアップモーダルへの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

なぜあなたは、ブートストラップ、jQueryと純粋なJavaScriptを混乱させるので、混乱したコードを使用していますか？以前にブートストラップを使ったことはありますか？ –

私はまだブートストラップとjavascriptについて学んでおり、W3Schoolから教材を学ぼうとしましたが、完全に理解できません – Gumilar

W3Schoolsから学ぶことは決してありません。それは本当に$ h！tであり、時代遅れです。その言葉を使用して申し訳ありませんが、それは本当に悪いです。私の答えを見てください。私はあなたのコード全体を書き直しています。 –

開くにはモーダルウィンドウでは、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を割り当てる必要があります。
アトリビュートを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パス値

答えて

関連する問題