如何控制bootstrap打开弹出行为

时间:2017-09-15 11:57:48

标签: javascript jquery twitter-bootstrap-3 jquery-plugins

 <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全屏弹出窗口。

1 个答案:

答案 0 :(得分:0)

您可以使用解决方案

 <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,因此您的图书馆无法定位该元素&amp;附上click事件。

在该点击事件中,您可以查看条件&amp;根据条件你可以打开弹出窗口。

希望这会对你有所帮助。