如何控制bootstrap打开弹出行为

Question

 <a href="#open-popup" data-href="#open-popup" class="open-popup" id="open-popup-button">open PopUp</a>

它打开全屏弹出窗口，现在我想在打开弹出窗口之前检查一些条件。

 if(conditionMet){
   // Open popup
 }else{
   //show msg
   }

我到目前为止都试过了

 <a href="javascript:void(0)" data-href="#open-popup" class="open-popup" id="open-popup-button">open PopUp</a>
 if(conditionMet){
 $(this).attr('href',$(this).attr('data-href'))
}else{
 //show msg
}

但是它不工作。我使用jquery全屏弹出窗口。

Answer 1

这就是你的解决方案

 <a href="javascript:void(0)" data-href="open-popup" class="open-popup" id="open-popup-button">open PopUp</a>

 $(document).on('click','a#open-popup-button', function(e){
   if(conditionMet){
     $(this).attr('href',`#${$(this).attr('data-href')}`)
   }else{
     //show msg
   }
   e.preventDefault();
 });

我已经从data-href中删除了#，这样您的库就不能以元素为目标&附加了一个click事件。

在单击事件中，您可以检查条件&根据条件可以打开弹出窗口。

希望这能对你有所帮助。