Joomla3（Bootstrap v2.x）模态框重复生成modal-backdrop问题求助

环境与场景 #

• 基于Joomla3框架（对应Bootstrap v2.x）
• 页面包含多个预览链接，点击触发模态框：通过window.pvid传递目标ID，模态框触发show事件时，AJAX加载对应页面内容到modal-content容器中

异常现象 #

• 首次打开模态框：一切正常，点击关闭按钮或外部backdrop均可关闭，modal-backdrop能被正常移除
• 第二次及之后打开：每次打开都会新增一个modal-backdrop元素，导致页面背景逐次变暗；关闭模态框时仅移除最后一个backdrop，需多次点击才能清除所有多余背景层
• 常规解决方案无效，多余的modal-backdrop无法通过页面代码或CSS直接访问处理

页面简化代码 #

<!-- make the modal height adjust to size of window and have a scrollbar if necessary -->
<style type="text/css" media="screen">
    .xbpvmodal .modal-content {padding:15px;max-height:calc(100vh - 190px); overflow:scroll; }
</style>

<p>main page content</p>

<?php foreach($items as $item) : ?>
    <a href="" data-toggle="modal" data-target="#ajax-pvmodal" onclick="window.pvid=<?php echo $item->id; ?>;">click for preview item <?php echo $item->id; ?></a><br />
<?php endforeach; ?>

<p>rest of main page content</p>

<script>
jQuery(document).ready(function(){
// Load view with AJAX
    jQuery('#ajax-pvmodal').on('show', function () {
      jQuery(this).find('.modal-content').load('/link.to.page?id='+window.pvid);
    })
});
</script>
<!-- preview modal window -->
<div class="modal fade xbpvmodal" id="ajax-pvmodal" style="max-width:800px">
    <div class="modal-dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" 
                style="opacity:unset;line-height:unset;border:none;">&times;</button>
             <h4 class="modal-title" style="margin:5px;">Preview</h4>
        </div>
        <div class="modal-content">
            <!-- Ajax content will be loaded here -->
        </div>
    </div>
</div>

临时（体验极差的）解决方案 #

通过模态框隐藏时重载页面清除backdrop，但会丢失页面上下文：

jQuery('#ajax-pvmodal').on('hidden', function () {
   document.location.reload(true);
})    

核心疑问 #

1. 为何Bootstrap v2.x在后续打开模态框时会重复添加modal-backdrop？首次关闭时已移除原有backdrop，后续触发逻辑哪里出现异常？
2. 如何有效阻止这种重复添加backdrop的现象，无需重载页面？

内容的提问来源于stack exchange，提问作者RogerCO