JQuery Dialog/Pop-Up

Bob Schneider
Bob Schneider used Ask the Experts™
on
I have a window on this page (https://www.gopherstateevents.com/series/cc_nordic/team_stdgs.asp?series_id=24) that opens as an old school javascript pop-up window (click on the "About" link).  I would like a more contemporary mobile responsive overlay-type dialog.  How can I get that.

Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
President / Owner CARDA Consultants Inc.
Distinguished Expert 2018
Commented:
What about https://jquerymodal.com/

You may also like to review https://jqueryui.com/dialog/
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
What Daniel is saying is to use a modal. Since you are already using bootstrap,use the built in options there https://getbootstrap.com/docs/4.4/components/modal/


Notice that in a modal, the data is already on the page or at least the html is.  In the example they show
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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">
        <p>Modal body text goes here.</p>
      </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>

Open in new window

Your data that you display is going to end up inside of the <div class="modal-body">.  Because your site is dynamic, you don't start out with data there. Instead, use ajax to hit an external page of yours with the input data that will output what you need. Inject the output to the div#modal-body.  You only need one modal on the page when you use ajax. That means if you have links to show something in multiple places on the page, you are only using the one modal but perhaps hitting multiple external pages to get the output or you have just one external page that can handle different types of data like process.asp?action=sales&product=2 or process.asp?action=getTime&member=134
Bob SchneiderCo-Owner

Author

Commented:
Thanks!  I will try to put these into practice tomorrow!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial