确定单击按钮以进行模式操作

时间:2018-07-08 18:40:19

标签: javascript angular zurb-foundation

我有2个按钮,我想为其调用相同的模态,但是模版上的文本应根据所单击的按钮进行更改。我该怎么办?

 <div>
    <a class="button" data-open="new-modal" 
     (click)="confirmModal(studentInfo)>Edit</a>

   <a class="button" data-open="new-modal"    
     (click)="confirmModal(studentInfo.id)>Delete</a>
 </div>

模式

   <div class="reveal" data-reveal id="new-modal">
      <h5>Edit Student Info?</h5> // I want to add "Delete student info 
        here too"

      <div class="secondary button-group">
        <a class="button" href="#">Yes</a>
        <a class="button" href="#">No</a>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

向您的confirmModal()函数传递第二个参数,并将内容存储在ts或js代码中模态可访问的变量中,并使用此变量在模态中加载相关配置

答案 1 :(得分:0)

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

<script>
    $(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>
<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>