モーダルポップアップにデータを渡す

Question

モーダルを開くボタンがありますが問題なく動作しますが、ボタンからモーダル内のフィールドにデータを渡したいと思っています。

HTML

<input type=button value='Add Background' id='myBtn2' data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"> 

<div id="myModal2" class="modal"> 

<!-- Modal content --> 
<div class="modal-content"> 
<span class="close2">&times;</span> 
<form action="includes/back.php" method="post" enctype="multipart/form-data"> 
    <center> 

    <h2><b>Background Information</b></h2> 
    <INPUT TYPE="text" NAME="army_id" id="army_id" size="auto" value=""> 
    <font>Background Title:&nbsp;&nbsp;&nbsp;</font> 
<INPUT TYPE="text" NAME="back_name" size="auto" value=""> 
<font>Background Info:&nbsp;&nbsp;&nbsp;</font> 
<INPUT TYPE="textarea" NAME="commander" size="auto" value=""> 
<input type="text" name="bookId" id="bookId" value=""/> 
<font> 
<b>STOP!</b><br> 
Please check your information before pressing the submit button below. Looking over your information now will make sure editing later won't be necessary. Thank you.<BR> 
<input type="hidden" name="FormSubmit" value="Yes"> 
<INPUT TYPE="submit" name="submit" value="Submit Regiment"> &nbsp; <INPUT TYPE="reset" value="Reset Fields"> 

JS

var modal2 = document.getElementById('myModal2'); 

// Get the button that opens the modal 
var btn2 = document.getElementById("myBtn2"); 

// Get the <span> element that closes the modal 
var span2 = document.getElementsByClassName("close2")[0]; 

// When the user clicks the button, open the modal 
btn2.onclick = function() { 
modal2.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span2.onclick = function() { 
modal2.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
if (event.target == modal2) { 
modal2.style.display = "none"; 
} 
} 

私は、誰かがそれを行う方法を私に助言することができ期待していますか？

Answer 1

モーダルにはデータを渡す必要はありません。ウィンドウの一部です.Javascriptを使用すると、ボタンと同じ方法でデータに影響を与えることができます。あなたはモーダルでテキストを変更したい場合たとえば、あなただけ行うことができます：

btn3.onclick = function() { 
    modal2.textContent = 'different text!'; 
} 

をモーダルの属性にデータをエンコードする本当の理由は、少なくともあなたが何かaを計画しているではない場合を除き、ありませんあなたの例よりも複雑です。

また、あなたのコードには奇妙な矛盾があります。なぜ入力要素がINPUT、時にはinputと書かれているのですか？これはページの仕組みに全く影響しませんが、読むのが少し難しくなります。最後に、font要素はHTML5では非推奨です。代わりにCSSを使用してフォント規則を設定してください。