前端--警告框&模态框组合

1. css

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

2. html

<a class="btn btn-danger btn-xs"
                                   data-toggle="modal"
                                   data-target="#alertModal"
                                   data-fid="{{ auction.id }}">
                                    <i class="fa fa-window-close"
                                       aria-hidden="true"
                                       style="color: red">
                                    </i>
                                </a>


 <!--删除模态框+警告框-->
        <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">

                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4>是否要确定删除？</h4>
                    <p style="padding-top: 20px;padding-bottom: 20px;">
                        该专场的商品都会被删除！！！
                    </p>
                    <p style="text-align: right">
                        <a href="" class="btn btn-default" data-dismiss="modal" aria-label="Close">取消</a>
                        <button type="button" class="btn btn-danger" id="btnDelete">确认</button>
                    </p>
                </div>
            </div>
        </div>

2. js

2.1 导入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

2.2 在按钮上传参，js获取

 $(function () {
        initalertModel();
    })

    // 动态删除
    function initalertModel() {
        $('#alertModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // 获取按钮对象
            var fid = button.data('fid'); // 获取传入的值  data-..
            $('#btnDelete').attr('fid', fid);
        })
    }

2.3 使用获取到的值

data: {fid: $('#btnDelete').attr('fid')},

3. 效果