Jquery Modal Pop Up Redirect

jquery redirect to another page on button click
bootstrap modal popup redirect page
jquery redirect with post
jquery redirect onclick with parameters
jquery redirect to action
jquery redirect to relative url
jquery redirect to another page in new tab
jquery redirect to homepage

I am creating a popup that will appear when a user clicks on a external link. The user has the option to continue by clicking the button "OK". Otherwise, if the user clicks on "Cancel", the user stays on the page.

I am able to detect when the user clicks on a external link and have the modal to appear fine.

I found an tutorial online on how to create a modal instance using Jquery. I was able, for the most part, be able to adjust the modal to my liking (although there are some alignment issues).

The issue I am encountering is how to grab the url of the anchor tag that was clicked on to the modal instances created in Jquery.

One approach I thought that would work is to create the buttons outside of the Modal instance and have these buttons appear when I call the Modal to open in my click function (below shows where I am setting my variable to the modal to open when anchor tag is clicked) which also resolve the alignment issues I was encountering mentioned earlier.

       var m = modal.open({content: "<div class='modal-content'><div class='modal-header'>
<h4 class='modal-title'>You are Now Leaving Our Site</h4>
<button id='closex' style='margin:5px' type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>x</span></button></div>
<div class='modal-body'>" 
+ "<p>You are now exiting the Regal Medical Group, Inc.  (RMG) web site.  When you exit this site to access a different non-RMG web site, you become subject to the other web site’s privacy policy and practices.  To learn about the other web site’s policy and practices, refer to the privacy policy statement posted on the web site’s home page.<br /><br />Press Ok to Continue<br />Press Cancel to Abort</p>" + "<br />" + "<div class='modal-footer'><button id='redirect' class='ok' href='#'>Ok</button><button id='close' class='cancel' href='#'>Cancel</button></div></div></div>"});

Then I thought I could create functions where it checks which buttons were clicked. If the "Ok" button was clicked, capture the url, clear the overlay, clear the modal (reason being that some of the links on the site working on have "target="_blank" in the anchor tag) and redirect the user to the desire site. Otherwise, if "Cancel", clear the overlay, clear the modal and remain in the same page.

However, this approach did not work.

My question: How can I get these buttons to work inside the instance of the Modal?

The following is the click functions for all anchor tags (where variable "m" is the modal):

$( document ).ready(function() {



$('a').on('click', function(e){
        e.preventDefault();
        var url = $(this).attr('href'),
            host = location.host;

        console.log("URL: " + url + " HOST: " + host);

        if (url.indexOf(host) > -1 || url.indexOf('http','https') == -1){
            /* If we find the host name within the URL,
               OR if we do not find http or https, 
               meaning it is a relative internal link
            */
            window.location.href = url;
        } else {
var m = modal.open({content: "<div class='modal-content'><div class='modal-header'>
    <h4 class='modal-title'>You are Now Leaving Our Site</h4>
    <button id='closex' style='margin:5px' type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>x</span></button></div>
    <div class='modal-body'>" 
    + "<p>You are now exiting the Regal Medical Group, Inc.  (RMG) web site.  When you exit this site to access a different non-RMG web site, you become subject to the other web site’s privacy policy and practices.  To learn about the other web site’s policy and practices, refer to the privacy policy statement posted on the web site’s home page.<br /><br />Press Ok to Continue<br />Press Cancel to Abort</p>" + "<br />" + "<div class='modal-footer'><button id='redirect' class='ok' href='#'>Ok</button><button id='close' class='cancel' href='#'>Cancel</button></div></div></div>"});
if(m == true) {
                return m;
            } 
        }
        });

    });

and the following code is the instance of the modal:

/*Pop-Up Modal Set UP
========================================*/
var modal = (function(){
    var 
    method = {},
    $overlay,
    $modal,
    $content;/*,
    $close,
    $cancel,
    $ok;*/

    // Center the modal in the viewport
    method.center = function () {
        var top;
        var left;

        top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
        left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

        $modal.css({
            top:top + $(window).scrollTop(), 
            left:left + $(window).scrollLeft()
        });
    };

    // Open the modal
    method.open = function (settings) {
        $content.empty().append(settings.content);

        $modal.css({
            width: settings.width || 'auto', 
            height: settings.height || 'auto'
        });

        method.center();
        $(window).bind('resize.modal', method.center);
        $modal.show();
        $overlay.show();
    };

    // Generate the HTML and add it to the Modal document
    $overlay = $('<div class="overlay" style="display: none;"></div>');
    $modal = $('<div class="modal id="myModal"></div>');
    $content = $('<div class="modal-dialog">');

    $modal.hide();
    $overlay.hide();
    $modal.append($content);

    $(document).ready(function(){
        //Add the Overlay and Modal
        $('body').append($overlay, $modal); 
    });

    return method;
}());
  1. Nothing is executed after a return
  2. you already had an e.preventDefault();
  3. bind is deprecated for .on

To answer:

Store the URL and use it later

var $currentLink;
$('a').on('click', function(e){
    e.preventDefault();
    $currentLink = $(this); 


...

$(document).on("click","#redirect",function(e) {
  e.preventDefault();
  if ($currentLink) location = $currentLink.attr('href');
});

how do I make the Dialog Widget: Modal Confirmation redirect to , But I want to make each of these two options redirect to a certain page/site depending on <title>jQuery UI Dialog - Modal confirmation</title> jQuery Modal Popup. jQuery modal dialog boxes are an excellent way to demonstrate information quickly. If you prepare properly while creating jQuery modal dialog boxes, you can alert your users or

Here you have a complete example for what I understood you need. As you will notice, I am not recreating the dialog each time, just hiding it when not needed. You might also notice the async/await and the array notation syntax. If you need to be bakcward compatible with older browsers they can be easily transcribed or transpiled, but I hope you will better understand it this way.

        
        confirm = (url) => {
		return new Promise((resolve, reject) => {
			let yes = $('#overlay button#yes')
			let no = $('#overlay button#no')
			
			off = (then) => {
				yes.off() 
				no.off() 
				$('#overlay').addClass('hidden')
				then()
				}
				
			yes.one('click', () => {off(resolve)})
			no.one('click', () => {off(reject)})
		
			$('#overlay #link').text(url)
			$('#overlay').removeClass('hidden')
		})
	}
	
	jump = (url, target) => {
		if(!target || target == '_self') {
			window.location.href = url;
		} else {
			window.open(url, target)
		}
	}
	
	handle = async(e) => {
		e.preventDefault()
		link = e.currentTarget
		
		let url = $(link).attr('href')
		let target = $(link).attr('target')
        let host = location.host

        if ((host && url.indexOf(host) > -1) || !/^https?:/.test(url)){ // relative link
			jump(url, target)
		} else {
			try {
				await confirm(url)
				jump(url, target)
			} catch(e) {/*nope*/}
		}
	}
	
	attach = () => {
		$('#content').on('click','a', handle)
	}
	
	$(attach)
#overlay {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: rgba(0,0,0,.5);
	display: flex;
}

#confirm-dialog {
	position: relative;
	width: 50%;
	min-height: 7em;
	background-color: white;
	border: 1px solid black;
	border-radius: .5em;
	margin: auto auto;
}

#confirm-dialog h1 { 
	font-family: Verdana, Geneva, sans-serif; 
	font-size: 1.5rem; 
	font-style: normal; 
	font-variant: normal; 
	font-weight: 700; 
	line-height: 1.7rem; 
	text-align: center;
	}

#footer {
	position: absolute;
	height: 3em;
	bottom: 0;
	width: 100%;
	justify-content: flex-end;
	display: flex;
	border-top: 1px solid gray;
}
#link {
	margin-bottom: 3em;
	padding: .5em;
	text-align: center;
	font-size: 1.5em;
}
#footer button {
	width: 10em;
	margin: .2em 1em;
}

.hidden {
	display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="overlay" class="hidden">
	<div id="confirm-dialog">
		<h1>Do you want to navigate to:</h1>
		<div id="link"></div>
		<div id="footer">
			<button id="yes">Yes</button>
			<button id="no">No</button>
		</div>
	</div>
</div>

<div id="content">
	This is an <a href="/apple">internal link</a> while this one is <a href="http://www.google.com" target="_blank">external</a> like <a href="http://codeproject.com">this</a> too.
</div>

modal popup when a button clicked and redirect to other page after , You can use the Jquery dialog box for displaying the modal popup and add a button on the dialog for redirecting to other page. Checkout the� Here Mudassar Ahmed Khan has explained with an example, how to implement and display jQuery Modal Popup Dialog (Window) in ASP.Net MVC Razor. The Partial View will be populated and fetched using jQuery AJAX and finally it will be rendered as HTML inside jQuery Modal Dialog (Modal Popup window). TAGs: ASP.Net, jQuery, jQuery Plugins, Entity Framework, MVC, Partial View

I would like to thank everyone who helped me with my question. I was able to figure out by passing in the href to the ok button when the popup appears on the screen. In by button, I pass in the following value in the href: e.currentTarget.href. Once I added that, it worked like a charm.

Here is the full code if anyone else would like to use it:

$( document ).ready(function() {

    $('a').on('click', function(e){
        e.preventDefault();
        var url = $(this).attr('href'),
            host = location.host;

        if (url.indexOf(host) > -1 || url.indexOf('http','https') == -1){
            /* If we find the host name within the URL,
               OR if we do not find http or https, 
               meaning it is a relative internal link
            */
            window.location.href = url;
        } else {

            var m = modal.open({content: "<div class='modal-content'><div class='modal-header'>
            <h4 class='modal-title'>You are Now Leaving Our Site.</h4>
            <button id='closex' style='margin:8px' type='button' class='close' data-dismiss='modal' aria-label='Close'>
            <span aria-hidden='true'>x</span></button></div><div class='modal-body'>" 
            + "<p>You are now exiting the NameOfSite web site.  When you exit this 
            site to access a different non-NameOfSite web site, you become subject to the other web site’s privacy 
            policy and practices.  To learn about the other web site’s policy and practices, refer to the privacy 
            policy statement posted on the web site’s home page.<br /><br />Press Ok to Continue
            <br />Press Cancel to Abort</p>" + "<br />" + "<div class='modal-footer'>
            <a id='redirect' class='btn btn-primary' href='" + e.currentTarget.href + "' target='_blank'>Ok</a>
            <button id='close' class='btn btn-default' href='#'>Cancel</button></div></div></div>"});

            if(m == true) {
                return m;
            } 
        }
    });

});

How to Redirect to Another Web Page Using jQuery / JavaScript, You can simply use the JavaScript window.location property to make a page redirect, you don't need any jQuery for this. If you want to redirect the user from one� Jquery Modal Pop Up Redirect. Ask Question Asked 9 months ago. Active 9 months ago. Viewed 100 times 0. I am creating a popup that will appear when a user clicks on a

Redirect with jQuery UI Dialog, Remeber the last post I talked about a straightforward countdown redirect? Turns out sometimes that's not good enough, in cases you want to give user the right� JavaScript Reference HTML DOM Reference jQuery Find Hidden Element Redirect Webpage Zoom Hover a Modal Box. A modal is a dialog box/popup window that is

apex.navigation, Functions. dialog; popup; openInNewWindow; redirect A modal page is loaded in an iframe using jQuery UI dialog widget. It is an overlay� jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Guid: Disable modal automatic sign in modal/redirect on a secured , Guid: Disable modal automatic sign in modal/redirect on a secured page for Display the error page instead of the modal sign in pop-up/automatic links for anonymous users to bring up a modal using Javascript/JQuery. jQuery Modal is the easiest way to display modal windows with jQuery. Built by Kyle Fox.

Comments
  • @mplungjan: can you provide more context. Sorry for asking
  • Unless you are using the browser's confirm() method to ask the user, you have no means to create a blocking modal - your modal is just a bunch of new elements on the screen. That means when you trigger the modal you should return a promise. Clicking OK or Cancel should resolve or respectively reject that promise. On caller side you can attach a then (and a catch) to handle them. Of course, if you can, you should use async/await syntax as it is much clearer. As a working example check UIKit's modal utilities (scroll the page to the end): getuikit.com/docs/modal
  • @ mplugjan: I tried implementing what you suggested but I am unable to get the url. I just get the site url followed by "/undefined"
  • Thank You. I appreciate it. I see what you mean know
  • @ mplugjan: I tried your approach but it forces the user to go to a page that does not exist
  • @mplugjan: I can see if the url was pass correctly. Currently, as I see it, shows undefiend
  • Ah, the modal is not generated at click time. Ok, I'll change the code
  • Thank You ZorgoZ. I was able to find an alternative to my solution. I will post it shortly