这篇文章主要介绍了弹出模态框modal的实现方法及实例的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下，弹出模态框modal的实现方法及实例，一个简单的点击列表修改按钮，弹出bootstrap模态框，修改状态传到后台php

1. <a href="" data-toggle=" rel="external nofollow" rel="external nofollow" modal" data-target="#myModal" class="btn btn-success btn-sm edit">修改</a> 
2.     <!-- <a href="" data-toggle=" rel="external nofollow" rel="external nofollow" modal" data-target="#myModal" class="btn btn-danger btn-xs" onclick="return confirm('删除后无法恢复,确定要删除吗')">删除</a> --> 
3.    </td> 
4.  </tr> 
5.  @endforeach 
6.  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
7.    <div class="modal-dialog"> 
8.      <div class="modal-content"> 
9.        <div class="modal-header"> 
10.          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
11.            &times; 
12.          </button> 
13.          <h4 class="modal-title" id="myModalLabel"> 
14.              请修改回访状态 
15.          </h4> 
16.        </div> 
17.        <div class="modal-body "> 
18.      <select class="form-control" id="select"> 
19.       <option>成功</option> 
20.       <option>未联系</option> 
21.       <option>失败</option> 
22.      </select> 
23.        </div> 
24.        <div class="modal-footer"> 
25.          <button type="button" class="btn btn-default" data-dismiss="modal">关闭 
26.          </button> 
27.          <button type="button" class="btn btn-primary saveId"> 
28.            提交更改 
29.          </button> 
30.        </div> 
31.      </div> 
32.    </div> 
33.  </div> 
34.  
35. var saveID; 
36.   $('.table').on('click','.edit',function(){ 
37.    console.log($(this).parent().parent().attr('data-id')); 
38.    saveID = $(this).parent().parent().attr('data-id'); 
39.   }); 
40.   $('.saveId').click(function(){ 
41.     console.log(111,saveID); 
42.      var options = $("#select option:selected"); 
43.      var status = options.val(); 
44.      $.ajax({ 
45.          type: "POST", 
46.          url: "/subscribe/edit", 
47.          dataType:"json", 
48.          data:{ 
49.           "saveID" :saveID, 
50.           "status":status, 
51.           "_token":"{{ csrf_token() }}", 
52.          }, 
53.          success: function(data) { 
54.           if (data.code == 200) { 
55.             window.location.href="{{ url('subscribe/list') }}" rel="external nofollow" ; 
56.           } 
57.          } 
58.        }); 
59.   });

Tags: 弹出模态框 modal

分享到：