Question

当用户点击“更多详细信息”按钮时，我想以模态显示我卡的更多详细信息，我已经看到了有关此问题的答案，但我不希望信息在输入字段中。可以请有人帮我吗？

 <button class="open-homeEvents btn btn-primary" data-id="2014-123456"  data-toggle="modal" data-target="#modalHomeEvents">More Details</button>

模态

<div id="modalHomeEvents" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="height:50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">

         <label>Student ID</label>     
        <input type="hidden" name="eventId" id="eventId"/>
        </div>
        <div class="modal-footer">
          <input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
      </div>

    </div>
  </div>

的Javascript

<script type="text/javascript">$(document).on("click", ".open-homeEvents", function () {
     var eventId = $(this).data('id');
     $(".modal-body #eventId").val( eventId );
});</script>

Answer 1

您可以使用div或span创建id的容器元素，而不是使用输入字段，并使用.html() jQuery方法更新元素的内容。

＆＃13;

$(document).on("click", ".open-homeEvents", function () {
     var eventId = $(this).data('id');
     $('#idHolder').html( eventId );
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Modal</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />	
</head>
<body>
<button class="open-homeEvents btn btn-primary" data-id="2014-123456"  data-toggle="modal" data-target="#modalHomeEvents">More Details</button>	
<div id="modalHomeEvents" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="height:50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">

         <label>Student ID</label>     
        <input type="hidden" name="eventId" id="eventId"/>
        	<span id="idHolder"></span>	
        </div>
        <div class="modal-footer">
          <input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
      </div>

    </div>
  </div>	
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

按钮点击将值传递给模态

1 个答案: