We Keep Coding

When the jQuery dialog is on I do not want the user to interact with the background

If the user clicks an external link, the jQuery UI dialog appears with "ok" and "cancel" buttons and when they hit "ok" it should take them to the external site.
Everything is working as expected, but the problem is with the modal:true; when the dialog is on the user is able to work on the background and I want the background to be grayed out when the popup is on.
$(window).on('load', function(){
$.expr[":"].external = function(a) {
var linkhn = a.hostname.split('.').reverse();
var linkHref = linkhn[1] + "." + linkhn[0];
var domainhn = window.location.hostname.split('.').reverse();
var domainHref = domainhn[1] + "." + domainhn[0];
return !a.href.match(/^mailto\:/) && !a.href.match(/^tel\:/) && linkHref !== domainHref;
};
$("a:external").addClass("ext_link");
});
$(document).ready(function(){
jQuery(document).on("click", ".ext_link", function () {
$("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id','dialog-confirm').css('display','none');
var link_val = this;
$('#dialog-confirm').dialog({
title: "External Link",
height: "auto",
width: 410,
resizable: false,
modal: false,
buttons: {
"Ok": function() {
window.open( link_val.href); $(this).dialog("close"); $(this).dialog('destroy').remove();
},
Cancel: function () {jQuery(this).dialog("close"); $(this).dialog('destroy').remove() ;}
}
}).dialog("widget").find(".ui-dialog-titlebar").hide();
return false;
});
});

You can use another div which opens up and covers entire page, the below code is written in such manner.
Not disturbing much of your code, I've added <div> which will be hidden on page load. This <div> will be shown when the popup opens, and same <div> will be hidden when dialog closes.
$(document).ready(function() {
jQuery(document).on("click", ".ext_link", function() {
$('#scrLoader').show();
$("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id', 'dialog-confirm').css('display', 'none');
var link_val = this;
$('#dialog-confirm').dialog({
title: "External Link",
height: "auto",
width: 410,
resizable: false,
buttons: {
"Ok": function() {
window.open(link_val.href);
$(this).dialog("close");
$(this).dialog('destroy').remove();
},
Cancel: function() {
$('#scrLoader').hide();
jQuery(this).dialog("close");
$(this).dialog('destroy').remove();
}
}
}).dialog("widget").find(".ui-dialog-titlebar").hide();
return false;
});
});
#scrLoader {
background-color: #333;
opacity: 0.8;
position: fixed;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('your path to a loader gif');
background-position: center;
background-repeat: no-repeat;
}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<input type="button" class="ext_link" value="click me" />
<div id="scrLoader" style="display: none;" hidden="true"></div>
You can also a GIF, like a loader GIF, which will be displayed when that particular div is open, so that user understands that some process is going on.
Hope this helps.

How to display js alert popup box with a particular word being a link to click on?

I'm unable to create a alert box with having a link that you can click on to open up the link. This message should popup as a alert with the word "System Form" being a url link to click on it and how to make "System Form" underlined url in a alert message?:
Example Alert message: "Please complete System Form and get a signature approval before attaching the form."

You can not modify the system alert message, but you can use jQuery to make your own alerts, that can contain icons and hyperlinks. Try below snippet, please modify css as per your need.
$(document).ready(function(){
$('#btnTest').click(function(){
ShowCustomDialog();
});
});
function ShowCustomDialog()
{
ShowDialogBox('Warning',' Record updated successfully.','Ok','', 'GoToAssetList',null);
}
function ShowDialogBox(title, content, btn1text, btn2text, functionText, parameterList) {
var btn1css;
var btn2css;
if (btn1text == '') {
btn1css = "hidecss";
} else {
btn1css = "showcss";
}
if (btn2text == '') {
btn2css = "hidecss";
} else {
btn2css = "showcss";
}
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'scale', duration: 400 },
buttons: [
{
text: btn1text,
"class": btn1css,
click: function () {
$("#dialog").dialog('close');
}
},
{
text: btn2text,
"class": btn2css,
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}
.showcss{ display:block;}
.hidecss{ display:none;}
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body>
<input type="button" id ="btnTest" value="Test"/>
<div id="dialog" title="Alert message" style="display: none">
<div class="ui-dialog-content ui-widget-content">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0"></span>
<label id="lblMessage">
</label>
</p>
</div>
</div>
</body>

There is no way to insert a hyperlink in a javascript alert. It would be a better idea to use a confirm dialog like this:
var goToSystemForm = confirm('Please complete System Form and get a signature approval before attaching the form. Would you like to be directed there now?');
if (goToSystemForm){
window.location.href = 'https://www.stackoverflow.com';
}
else{
//do something else or nothing?
}

populate label when load jquery popup

Will be displaying a jquery popup many times through out my project. I would like to populate the label inside the div with a different message each time so for eg...
var popUpMessageSave = "You have successfully saved.";
loadPopUp(popUpMessageSave);
var popUpMessageFail = "You have failed to save.";
loadPopUp(popUpMessageFail);
not sure how to populate the label each time??
<div style="display: none;">
<div id="saveDialogSingleFeature" title="Save Complete">
<input type="text" title="Name" value=""/>
<label></label>
</div>
</div>
function loadPopUp(popUpMessage) {
$("#saveDialogSingleFeature").dialog({
width: "auto",
height: "auto",
position: { my: "top", at: "bottom", of: $("header") },
show: { effect: "slideDown" },
hide: true,
closeOnEscape: true
}).parent().appendTo("form:first");
//clear label and add new
$('input:text').next('label').html("");
$(this).next('label').html(popUpMessage);
setTimeout(function () {
$("#saveDialogSingleFeature").dialog('close')
}, 5000);
}
UPDATE
Added an ID to the DIV and add empty and append to the loadPopUpMessage()
$("#popUpLabel").empty();
$("#popUpLabel").append("some Text");
<input type="text" id="popUpLabel" value=""/>

how to call javascript confirm dialog function in html.actionlink in asp.net mvc?

I want to show a confirm dialog menu, when user clicks DELETE button.
But button doesn't trigger my script. After triggering JavaScript, if user chose OK, script must go to the action. Else, if user clicks the CANCEL, nothing should happen.
Here is the JavaScript code;
<script type="text/javascript">
$(document).ready(function () {
$(".confirmDialog").on("click", function (e) {
// e.preventDefault(); use this or return false
var url = $(this).attr('href');
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
buttons: {
"OK": function () {
$(this).dialog("close");
window.location = url;
}, "Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog-confirm").dialog('open');
return false;
});
});
</script>
Here is MVC codes;
<div style="text-align: right; font-weight: bold; font-size: larger; color: red;">
<tr>
<td>#Html.ActionLink("Delete", "Your-Action", new { #class = "confirmDialog" })</td>
</tr>
</div>
<div id="dialog-confirm" style="display: none">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Are you sure ?
</p>
</div>

The Overload of Actionlink which you are using expects 3rd parameter as objectroutes not htmlattributes.
Correct actionlink as shown:
#Html.ActionLink("Delete", "Your-Action", new{} ,new { #class = "confirmDialog" })
OR
#Html.ActionLink("Delete", "Your-Action", null ,new { #class = "confirmDialog" })
The rest of your code is just fine..!!

What is the canonical approach to passing data to a jQuery UI Dialogue?

I have the following markup:
<div data-id="1" data-name="Product 1">Product 1 Delete</div><br />
<div data-id="2" data-name="Product 2">Product 2 Delete</div><br />
<div data-id="3" data-name="Product 3">Product 3 Delete</div><br />
<div data-id="4" data-name="Product 4">Product 4 Delete</div><br />
<div id="delete-product" title="Delete product?">
<p>
<span
class="ui-icon ui-icon-alert"
style="float:left; margin:0 7px 20px 0;">
</span>
This product will be permanently deleted and cannot be recovered. Are you sure?
</p>
</div>
I have the following script jQuery UI:
$(function () {
$("#delete-product").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("a[id^='delete']").each(function () {
$(this).click(function () {
$("#delete-product").dialog('open');
return false;
});
});
});
How do I pass a value to the Delete function so I can display it in the dialogue box? I thought about setting a global variable but that's a bit icky.
I don't mind if I just get a reference to the <a> tag that raised the click event. From there I can work out the rest.

You can use the .data() API in jQuery.
$(function () {
$("#delete-product").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete": function () {
var id = $(this).data('item-id');
//Do something with the id
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("a[id^='delete']").each(function () {
$(this).click(function () {
var id = $(this).parent().attr('data-id');
$("#delete-snapshot").data('item-id', id).dialog('open');
return false;
});
});
})
EDIT: Just noticed that ID's missmatch for the dialog. But the problem is in the code I copied from your question.