javascript - 如何避免模态窗口在网站上更改 CSS

Question

因为通常在任何管理页面上，我都有 3 个按钮并排放置。一张用于详细信息，一张用于编辑，一张用于删除，它看起来像:

<a n:href="detail $candidate->id">
    <button type="button" class="btn btn-success btn-sm">
        <i class="glyphicon glyphicon-search" style="margin-right:0px"></i>
    </button>
</a>                                                                                              
<a href="#">
    <button type="button" class="btn btn-info btn-sm">
        <i class="glyphicon glyphicon-pencil" style="margin-right:0px"></i>
    </button>
</a>                                                
<a  n:href="delete! $candidate->id">
    <button type="button" class="btn btn-danger btn-sm">
        <i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
    </button>
</a>

之后我决定我需要在用户按下“DELETE”时添加“Confirm modal”以避免误点击

<a
    data-nette-confirm="modal"
    data-nette-confirm-title="Confirm"
    data-nette-confirm-text="Are you sure you want to delete?"
    data-nette-confirm-ok-class="btn-danger"
    data-nette-confirm-ok-text="Yes"
    data-nette-confirm-cancel-class="btn-success"
    data-nette-confirm-cancel-text="No"
    class="btn btn-danger"
    data-ajax="off" // or class="ajax"
    n:href="delete! $candidate->id">                                                        
    <button type="button" class="btn btn-danger btn-xs">
        <i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
    </button>
</a>    

在这之后，我的 DELETE 按钮比其他按钮大两倍，我试着让它 xs 但仍然大得多。有什么办法可以避免这种变化？

Answer 1

尝试删除:

// or class="ajax"

它会覆盖之前定义的 class="btn btn-danger"。