2017-10-10 68 views
2

我想使用哈希打开模式(例如:www.example.com/#example。)这是我的代码如下,但模态不显示。感谢您的回答,我很感激。打开哈希模式

$(document).ready(function() { 
 
    $('.popup').click(openModalPopupClick); 
 

 
      function openModalPopup(){ 
 
      var hashText = window.location.hash.substr(); 
 
      if (hashText){ 
 
       $('#'+hashText).modal('show'); 
 
      } 
 
      } 
 

 
      function openModalPopupClick(){ 
 
      var hashText = $(this).attr('href'); 
 
      if (hashText){ 
 
       $(hashText).modal('show'); 
 
      } 
 
      } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<a href="#regis-new-company" class="popup" role="button">click</a> 
 
<div class="modal fade" id="regis-new-company" role="dialog" aria-labelledby="myLargeModalLabel"> 
 
    <div class="modal-dialog modal-lg"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"></div> 
 
     <div class="modal-body"></div> 
 
     <div class="modal-footer"></div> 
 
    </div> 
 
    </div>  
 
</div>

+0

我用'bootstrap' cdn更新了你的问题,现在看起来像工作,有点不清楚你的问题是什么,'#regis-new-company' modal正常工作。 – Pedram

回答

0

hashText媒体链接有#所以$('#'+hashText).modal('show');应该$(hashText).modal('show');并呼吁准备openModalPopupClick功能。我已更新您的代码。

$(document).ready(function() { 
$('.popup').click(openModalPopupClick); 

     function openModalPopup(){ 
     var hashText = window.location.hash.substr(); 
     if (hashText){ 
      $(hashText).modal('show'); 
     } 
     } 

     openModalPopup(); 

     function openModalPopupClick(){ 
     var hashText = $(this).attr('href'); 
     if (hashText){ 
      $(hashText).modal('show'); 
     } 
     } 
}); 
+0

嘿@zeeshan Anjum非常感谢你,你的代码工作!但现在我崩溃了另一个问题。这就是函数openModalPopup();与同一页面中的折叠手风琴相冲突。当我在该页面中为折叠功能输入另一个hastag url时,openModalPopup();总是打电话让页面显示半灰色的弹出式背景。 –

+0

if(location.hash!= null && location.hash!=“”){('。collapse')。removeClass('in'); $(location.hash +'.collapse')。collapse('show'); } \t \t \t //弹出链接 \t $( '弹出'。)点击(openModalPopupClick)。 (){ function openModalPopup (hashText){(hashText).modal('show'); } } openModalPopup(); function openModalPopupClick(){ var hashText = $(this).attr('href'); (hashText){(hashText).modal('show'); } } –

+0

您可以在调用openModalPopup函数时添加条件。像 'if(hashText ==“#open-modal”)openModalPopup();' –