Question

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Edit</button>

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Edit</button>      <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">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" onclick="saveHTML(this)" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>

function saveHTML() {
    //code

}

我有模态html，并且我有几个按钮，所有这些都可以触发按钮，因为设置了data-target和data-toggle属性。但是点击模态内的关闭按钮，我怎样才能找出触发模态的按钮。触发模态的按钮没有唯一的ID，因为我必须使代码动态化。所以必须使用＆＃39;这个＆＃39;操作

Answer 1

简单解决方案1：您可以添加自定义类来了解单击了哪个按钮，此解决方案将在按钮本身上添加该类，然后您可以识别此

class Twilio::TokenController < ApplicationController
  skip_before_filter :verify_authenticity_token

  def generate
    token = ::TwilioCapability.generate("#{params[:appointment_id]}#{params[:from_type]}")
    render json: { token: token }
  end
end

twilocapabilty.rb file code

class TwilioCapability
  def self.generate(id)
    account_sid = ENV['TWILIO_ACCOUNT_SID']
    auth_token  = ENV['TWILIO_AUTH_TOKEN']
    capability = Twilio::Util::Capability.new account_sid, auth_token

    application_sid = ENV['TWIML_APPLICATION_SID']
    capability.allow_client_outgoing application_sid
    capability.allow_client_incoming id

    capability.generate
  end
end

简单解决方案2：单击按钮时立即附加功能

$(document).ready(function(){
    $("button").click(function(){
        $(this).addClass("pressed");
    });
});

我也有很多解决方案但是我需要看看你想要的目的。

Answer 2

使用js打开模态并存储目标元素。您可以打开以下链接并进行测试。

https://jsbin.com/nejukidopi/1/edit?html,js,output

$(document).ready(function(){
 
  var currentBtn;
  
  $('.my-edit-btn').on('click', function(event){
    currentBtn = event.target;
    $('#myModal').modal('show');
  });
  
  window.saveHTML = function(){
    alert($(currentBtn).text());
  }

});

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><!-- Latest compiled and minified CSS -->
<body>
   <button type="button" class="btn btn-success my-edit-btn">Edit 1</button>
   <button type="button" class="btn btn-success my-edit-btn">Edit 2</button>      
   <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">
               <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default" onclick="saveHTML()" data-dismiss="modal">Save</button>
            </div>
         </div>
      </div>
   </div>
</body>

Answer 3

为按钮添加一个监听器，以便您确定哪个按钮显示为关闭模态

就我而言：

按钮：

<button class="close" id="close_modal_button" data-dismiss="modal">Close</button>

听众：

$('#close_modal_button').on('click', function(){
$(event).val(String(event.dataset['value']));
});

如何在按下模态

3 个答案: