0

I'm looking for a way to have a popup modal with a form, and whent he popup loads, the URL changes.

For example, if a person is viewing web.com/about and the popup loads, then it will change the URL to web.com/about?utm_form=popup

Is this possible?

Maybe it will add this utm to the URL when the popup is open, and removes it when closed? A plugin would be helpful.

Thanks for any thoughts.

1
  • Is it possible for you to use Bootstrap 3 or 4? Are you already using it? Or another CSS framework? May 26, 2019 at 18:49

2 Answers 2

0

If you are using bootstrap modal so below code is working :

$('#myModal').on('loaded.bs.modal', function (e) {
  if (typeof (history.pushState) != "undefined") {
        var obj = { Title: "About Us", Url: 'about?utm_form=popup' };
        history.pushState(obj, obj.Title, obj.Url);
    }
})
0

You can use vanilla JavaScript instead of jQuery.

document.getElementById('myModal').addEventListener('shown.bs.modal', function (e) {
    if (typeof (history.pushState) !== "undefined") {
        var obj = { Title: "About Us", Url: 'about?utm_form=popup' };
        history.pushState(obj, obj.Title, obj.Url);
    }
});

HTML modal structure

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Include Bootstrap and optionally jQuery (if needed for other parts of your project)

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<!-- Optional: jQuery if needed for other parts of your project -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Add the JavaScript code snippet just before the closing tag or in a separate JavaScript file included at the end of your HTML document:

<script>
document.getElementById('myModal').addEventListener('shown.bs.modal', function (e) {
    if (typeof (history.pushState) !== "undefined") {
        var obj = { Title: "About Us", Url: 'about?utm_form=popup' };
        history.pushState(obj, obj.Title, obj.Url);
    }
});
</script>

This vanilla JavaScript approach achieves the same functionality as the jQuery version you provided. This is little bit confusing you can use simple bootstrap, but by doing this you can learn alot.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.