javascript - Bootstrap-4 模态

Question

我的页面中有四个按钮，每个按钮都会打开相同的模式。所有按钮都具有以下结构。

<div class="card" data-toggle="modal" data-target="#target-modal">Button -1
   <p class="status" style="display: none;"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>

模态包含 <form> ，每个按钮的表单中的元素都会略有不同(表单中元素数量的更改将在后端使用 Laravel 进行处理)。

现在，我正在尝试实现这样的功能:当填写表单并单击 submit 时，我想确定四个按钮中的哪一个打开模式并制作 .status至display: block仅该按钮并关闭模式。应对所有四个按钮重复此过程。

在show.bs.modal的帮助下我能够识别哪个按钮打开了模式。但我想知道点击submit这个结果.

这是一个快速JS fillde我的代码。

如果有人能为我解决这个问题，那将会有很大的帮助。

Answer 1

你能做的是当 show.bs.modal模态上触发事件，可以通过 event.relatedTarget 获取触发显示的按钮的 DOM 节点目的。通过 .data() 将其存储在模式中jQuery 中可用的方法。

当模态中触发表单提交事件时，您只需从模态的数据对象中获取 DOM 节点即可:

$('#target-modal').on('show.bs.modal', function (e) {
    // Store the button that opened the modal
    $(this).data('from-button', e.relatedTarget);
});

$('#target-modal form').on('submit', function(e) {
    e.preventDefault();

    var triggerButton = $('#target-modal').data('from-button');
    $(triggerButton).css('font-weight', 'bold');
});

概念验证示例:

$(function() {
	$('#target-modal').on('show.bs.modal', function (e) {
		// Store the button that opened the modal
		$(this).data('from-button', e.relatedTarget);
	});
	$('#target-modal form').on('submit', function(e) {
		e.preventDefault();
		
		var triggerButton = $('#target-modal').data('from-button');
		$(triggerButton).css('font-weight', 'bold');
		
		$('#target-modal').modal('hide');
	});
});

.card {
  width: 150px;
  
  /* Only used to circumvent limitations in StackOverflow's code snippet */
  background-color: #4aa !important;
  
  color: #fff;
  text-align: center;
  padding: 20px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.status {
  font-size: 24px;
  position: absolute;
  right: 0;
  bottom:-20px;
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper">
<div class="card" data-toggle="modal" data-target="#target-modal">Button -1
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>

<div class="card" data-toggle="modal" data-target="#target-modal">Button -2
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>

<div class="card" data-toggle="modal" data-target="#target-modal">Button -3
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>

<div class="card" data-toggle="modal" data-target="#target-modal">Button -4
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
</div>

<div class="container">
   <div class="row">
       <div class="col-md-12">
           <div id="target-modal" class="modal fade" tabindex="-1" role="dialog" >
               <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-labelledby="myModalLabel" aria-hidden="true" aria-hidden="true">&times;</button>
                      </div>
                      <div class="modal-body">
                          <form>
                              <input type="text" name="first_name" placeholder="First Name" required>                                                    <input type="text" name="middle_name" placeholder="Middle Name" required>
                              <input type="text" name="last_name" placeholder="Last Name" required>
                              
                              <button type="submit" name="Submit" value="">Submit</button>
                          </form>
                      </div>
                  </div>
                </div>
            </div>
        </div><!-- /.modal -->
      </div>
  </div>