Question

如何将值传递给Bootstrap模式？我有一些基本的HTML，如下所示：

<h2 class="name" itemprop="name">Name ABC</h2>

我希望看到的是＃NAME ABC＆＃39;被推动或回应＃39;在一个bootstrap模式..

我假设你使用了一个＆＃39; id＆＃39;但是我＆＃39;一定不能确定如何编码...

引导程序中的HTML需要

<input type="text" name=" ID " value=""/> * I think!! *

如果有人可以使用基本的JavaScript来完成这项工作，我将非常感激！谢谢！

Answer 1

$("#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>

Answer 2

要实现此目的，您可以正常实例化Bootstrap模式，然后只需向h2元素添加一个点击处理程序，将其text()值放在模态中的目标input内。试试这个：

＆＃13;

$('.name').click(function() {
  $('#foo').val($(this).text())
});

＆＃13;

<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">&times;</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>

＆＃13;

Answer 3

你可以试试

  $('input[name="ID"]').val($('h2.name').text());

＆＃13;

$('input[name="ID"]').val($('h2.name').text());

＆＃13;

<!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">&times;</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>

＆＃13;

Answer 4

我认为你想要实现的是使用类.name获取文本的值，并将其设置为id属性，它位于bootstrap的模式框中。如果是这样，以下过程将有所帮助。

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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <p id="" class="myValue">One fine body&hellip;</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);
})

我所做的是从div中获取带有类名称的文本＆＃34; name＆＃34;但是作为模式div中的id属性，使用类＆＃34; myValue＆＃34;。希望这有帮助

将Javascript ID推送到bootstrap模式（当现有功能到位时......）

4 个答案: