ブートストラップモーダルに値を渡すにはどうすればよいですか？ 「NAME ABC」はプッシュまたはブートストラップモーダル以内に「エコー」されるために、私が起こる見たい何Javascript IDをブートストラップモーダルにプッシュする（既存のフィーチャーが存在する場合...）
<h2 class="name" itemprop="name">Name ABC</h2>
が..です
私は：私はこのようになりますいくつかの基本的なHTMLを持っています誰が作るために、基本的なJavaScriptででジャンプすることができた場合は、ブートストラップでHTMLが
<input type="text" name=" ID " value=""/> * I think!! *
が必要になります....あなたが「ID」を使用しますが、私は」それをコーディングする方法がわからないしなければならない
を想定し私はこの仕事をしたい非常に感謝しています！ありがとう！
あなたは、これはあなたが通常通りブートストラップモーダルをインスタンス化することができ、その後、単にそのtext()を置くh2要素にクリックハンドラを追加達成するために
$('input[name="ID"]').val($('h2.name').text());
$('input[name="ID"]').val($('h2.name').text());<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="name" itemprop="name">Name ABC</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" name="ID" value="" /> * I think!! *
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>を以下試すことができます値はターゲット内のinputです。私は何を達成しようとしているが、クラスの.nameのとテキストの値を取得し、id属性としてそれを設定していると思います
$('.name').click(function() {
$('#foo').val($(this).text())
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2 class="name" itemprop="name" data-toggle="modal" data-target="#exampleModal">Name ABC</h2>
<h2 class="name" itemprop="name" data-toggle="modal" data-target="#exampleModal">Name XYZ</h2>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="text" id="foo" name="ID" value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>$("#submit").click(function(){
$("#modalInput").val($("#input").val());
$("#modal_id").modal('show');
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Type a message : <input type="text" id="input">
<button id="submit">Send</button>
<div class="modal fade" id="modal_id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Message!</h4>
</div>
<div class="modal-body">
Your Value : <input type="text" id="modalInput" readonly/>
</div>
</div>
</div>
</div>：これを試してみてくださいブートストラップのモーダルボックスに入っています。そうなら、以下のプロセスが役立ちます。クラス「myValueとモーダルのdivのid属性としてクラス名 "名" でのdivからテキストを取られますが、その中には何私が行っている
HTML
<h2 class="name" itemprop="name">Name ABC</h2>
<a href="#" data-target="#myModal" data-toggle="modal">sdsdf</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p id="" class="myValue">One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
jqueryの
$(function() {
var myTxt = $('.name').text();
$('.myValue').attr('id', myTxt);
})
"これが役に立ちますようにお願いします。
このブートストラップ方式についてお話ししていますか？ https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h –
それほど明確ではない –
idを使ってテキスト値をキャプチャして、それをモーダルウィンドウ要素にid $（ '＃modal_element_id '）.val（$（'＃name '）。text（））; – JYoThI