Question

我已经在不同页面中完成了引导模态，这意味着另一个页面中的模态（modal.html）和不同页面中的按钮（career.php）都在工作，但是我想为多个按钮链接相同的模态。我该怎么做

$(document).ready(function(e){
    $('#btnModal') .click(function(){
        //using ajaz post
        $.post('modal.html' ,function(xx){
            $('#tmpModal').html(xx) //fill div tmpmodal with modal.html content..!!
            //calling modal
            $('#testModal').modal('show');
        })
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="testModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4>Apply Now</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="exampleFormControlInput1">Role</label>
                    <input class="form-control" type="text" placeholder="Dest" readonly>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlInput1">Name</label>
                    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlInput1">Email</label>
                    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlInput1">Phone</label>
                    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">Comment</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlFile1">Upload File</label>
                    <input type="file" class="form-control-file" id="exampleFormControlFile1">
                </div>
            </div>
            <div class="modal-footer">
                <div class="btn btn-danger" data-dismiss="modal">Close</div>
                <button class="btn btn-primary" onclick="contact_send();">SEND</button>
            </div>
        </div>
    </div>
</div>

<button class="btn btn-primary apply" id="btnModal">Apply</button>
                                 <li style="display:block;"><a href="modal.html" data-target="#testModal" data-toggle="modal"></a></li>
<div id="tmpModal"></div>

Answer 1

添加引导CSS和JS

<a href="#modal.html" class="btn btn-primary" data-target="#testModal" data-toggle="modal">Modal</a>
<a href="#modal.html" class="btn btn-primary" data-target="#testModal" data-toggle="modal">Modal</a>
<a href="#modal.html" class="btn btn-primary" data-target="#testModal" data-toggle="modal">Modal</a>
<div class="modal fade" id="testModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4>Apply Now</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="exampleFormControlInput1">Role</label>
                    <input class="form-control" type="text" placeholder="Dest" readonly>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlInput1">Name</label>
                    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlInput1">Email</label>
                    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlInput1">Phone</label>
                    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">Comment</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlFile1">Upload File</label>
                    <input type="file" class="form-control-file" id="exampleFormControlFile1">
                </div>
            </div>
            <div class="modal-footer">
                <div class="btn btn-danger" data-dismiss="modal">Close</div>
                <button class="btn btn-primary" onclick="contact_send();">SEND</button>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/k0yfpcs1/

Answer 2

只需基于不基于id的类进行操作

<button class="btn btn-primary someclassname" id="btnModal">Apply</button>

并更新javascript以单击该类上的事件

$('.someclassname') .click(function(){
        $.post('modal.html' ,function(xx){
            $('#tmpModal').html(xx)
            $('#testModal').modal('show');
        })
    })

如何为多个按钮调用相同的模式

2 个答案: