Opening modal with hash

Question

I want to open a modal with hash (example: www.example.com/#example.) This is my code below but the modal not showing. Thanks for your answer and I appreciate it.

$(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>

I updated your question with `bootstrap` cdn, now it's look like working, little unclear what's your problem, `#regis-new-company` modal works fine. — Pedram, Oct 10 '17 at 07:26

score 4 · Accepted Answer · answered Oct 10 '17 at 07:31

4

hashText allready have # so $('#'+hashText).modal('show'); should be $(hashText).modal('show'); and call openModalPopupClick function on ready. i have update your code.

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

answered Oct 10 '17 at 07:31

Zeeshan Anjum

944
8
16

hey @zeeshan Anjum thank you very much, your code worked! but now i have another problem with my collapse. thats function openModalPopup(); conflict with my collapse accordion in same page. When I enter another hastag url in that page for collapse function, the openModalPopup(); always call so the page show the half gray popup background. – Yohanes Christian Oct 10 '17 at 07:51
if(location.hash != null && location.hash != ""){ $('.collapse').removeClass('in'); $(location.hash + '.collapse').collapse('show'); } //popup link $('.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'); } } – Yohanes Christian Oct 10 '17 at 07:54
you can add condition when openModalPopup function should call. like `if(hashText == "#open-modal")openModalPopup();` – Zeeshan Anjum Oct 10 '17 at 07:54
hello @zeeshan anjum can you help me here https://stackoverflow.com/questions/46662730/conflict-function-modal-and-collapse-when-i-using-hashtext – Yohanes Christian Oct 11 '17 at 01:46

Opening modal with hash

1 Answers1