【问题标题】:Opening modal with hash用哈希打开模态
【发布时间】:2018-03-21 12:06:28
【问题描述】:

我想打开一个带有哈希的模式(例如: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>

【问题讨论】:

  • 我用bootstrap cdn 更新了你的问题,现在它看起来可以工作了,不清楚你的问题是什么,#regis-new-company modal 工作正常。

标签: javascript jquery modal-dialog bootstrap-modal hashtag


【解决方案1】:

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');
        }
      }
});

【讨论】:

  • 嘿@zeeshan Anjum 非常感谢您,您的代码有效!但现在我的崩溃还有另一个问题。这就是函数 openModalPopup();与我在同一页面中的折叠手风琴冲突。当我在该页面中输入另一个 hastag url 以实现折叠功能时,openModalPopup();总是调用所以页面显示半灰色弹出背景。
  • if(location.hash != null && location.hash != ""){ $('.collapse').removeClass('in'); $(location.hash + '.collapse').collapse('show'); } //弹出链接 $('.popup').click(openModalPopupClick);函数 openModalPopup(){ var hashText = window.location.hash.substr(); if (hashText){ $(hashText).modal('show'); } } openModalPopup();函数 openModalPopupClick(){ var hashText = $(this).attr('href'); if (hashText){ $(hashText).modal('show'); } }
  • 您可以在 openModalPopup 函数调用时添加条件。喜欢if(hashText == "#open-modal")openModalPopup();
  • 你好@zeeshan anjum 你能帮我吗stackoverflow.com/questions/46662730/…
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-01-27
  • 2022-12-10
  • 2014-03-30
  • 2019-07-22
  • 1970-01-01
  • 2013-01-29
  • 1970-01-01
相关资源
最近更新 更多