Develop Reference

Make an on user visit pop-up

I want to make a pop-up window that immediately appears in the middle of the site on user visit https://demo.infyways.com/demo/popup-and-iframes/website-disclaimer-popup
This is an example site of what I want but change the pop-up background. I know that this site is a pop-up generator but whenever I copy the code in generates I get my msg on the top of my site I only want the pop-up when user visits
This is a very mundane example of what I am trying to achieve using query
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">. </script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can
be moved, resized and closed with the 'x' icon.</p>
</div>
I can't seem to remove the close option from it and make it so the user can't proceed if he doesn't accept. I want to create 2 buttons 1 for agreeing -> user proceeds to my site which isn't visible if he doesn't agree 2nd button disagree and there is just a blank page
Can i use query or am I wasting my time for the agree or disagree buttons

Wouldn't you just hide the button?
Either use high-specificity:
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
display: none;
}
Or force it, using important:
.ui-dialog-titlebar-close {
display: none !important;
}
Example
$(() => {
$("#dialog").dialog();
});
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Update
I would make the window a modal, if you want to grab the user's attention.
$(() => {
$('#dialog').dialog({
modal: true,
dialogClass: 'no-close',
buttons: [{
text: 'Accept',
click: function() {
$(this).dialog('close');
// Log the acceptance of aggreement, and continue...
}
}, {
text: 'Decline',
click: function() {
$(this).dialog('close');
window.location = null; // Take the user somewhere else.
}
}]
});
});
.no-close .ui-dialog-titlebar-close {
display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<h1>Content Title</h1>
<p>This content isn't accessible, unless you've agreed.</p>
<div id="dialog" title="Attention!">
<p>This site tracks everything you do.</p>
<p>Do you accept?</p>
</div>

From the jQuery UI API documentation
Hiding the close button
In some cases, you may want to hide the close button, for instance, if
you have a close button in the button pane. The best way to accomplish
this is via CSS. As an example, you can define a simple rule, such as:
.no-close .ui-dialog-titlebar-close {
display: none;
}
Then, you can simply add the no-close class to any dialog in order to
hide its close button:
$( "#dialog" ).dialog({
dialogClass: "no-close", buttons: [
{
text: "OK",
click: function() {
$( this ).dialog( "close" );
}
}
]
});

jQueryUI dialog doesn't look right (missing styling?)

I have IE 11 and I am trying to open a dialog box with the click of a button but the dialog box which is opening is not what I want. It doesn't have a close icon and the layout is also very poor.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="//malsup.github.com/jquery.form.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-style:ridge;white-space: pre-wrap">
<div class="dialog">
<p style="white-space: pre-wrap"><%=solution%></p>
</div>
<button class="opener">Open Dialog</button>
</td>
I have added pre-wrap everywhere but the text seems to come in a single line. The text is properly formatted in the database.
JQuery code :
$('.opener').each(function() {
var dialog = $(this).prev('.dialog').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$(this).click(function () {
dialog.dialog("open");
});
});
});

Ah Ha... I re-read your question and I think I understand the problem you are seeing.
jQuery UI dialogs require (1) the jQuery UI css reference, AS WELL AS (2) the jQuery UI code, AS WELL AS (3) plain ol' jQuery.
Equally important, you need to match the versions. When the versions do not match (especially when jQUI and the css for jQUI are for different versions), buttons will be out of alignment, borders will be missing, the whole appearance is whacked. You have version-itis (note: -itis is Latin suffix for pain).
Suggestion:
Remove all references to jQuery/jQuery UI in your code and add the following lines inside the <head> tags of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
This will give you a version of jQuery / jQueryUI / css that are known to work together. If it works, you can even stick with it.
Reference:
Matching jQuery and jQuery-UI versions

It dosen't have a close icon and the layout is also very poor
I've just test your example, it's worked perfectly in IE 11.
HTML:
<div class="dialog">
<p style="white-space: pre-wrap">123123123</p>
</div>
<button class="opener">Open Dialog</button>
JS:
$('.opener').each(function(){
var dialog = $(this).prev('.dialog').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$(this).click(function () {
dialog.dialog("open");
});
});

Here is a code that should work:
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
<body>
<table>
<tr>
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-: ;style:ridge;white-space: pre-wrap">
<div id="dialog" title="Basic dialog">
<%=solution%>
</div>
<button id="opener">Open Dialog</button>
</td>
</tr>
</table>
http://fiddle.jshell.net/0n4exLq8/
as for the formatting problem, it looks like you have linebreaks in your DB which html will not be able to render. You will have to format the string on the server side (replace \n with <br />) or better yet convert it to a <ol>

There is a simpler way to work with jQueryUI dialogs.
You only need one dialog, and just re-use it.
First, it is important to understand how a jQUI dialog works. You "assign" an element (a div) to the dialog when you initialize it:
$('#msg').dialog();
Thereafter, whenever you call the dialog's open method
$('#msg').dialog('open');
the dialog is displayed with the contents of that div.
To change the contents of the dialog, just change the contents of that div:
$('#msg').html('<p>Here is some totally new information</p>');
$('#msg').dialog('open');
In your program, all you need to do when a button is pressed is to grab the data (either via ajax, or from the cell next door, or whereever) and stick it into the dialog's div, then open the dialog.
When you close the dialog, it is a good idea to clear the div as well:
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
close: {
effect: "explode",
duration: 1000,
function(){
$('#msg').html('');
}
}
});
jsFiddle Demo

Modal closing when load finishes

It appears that when the JQuery modal finishes loading it closes. None of the alerts in my script are appearing. Why doesn't it stay open? Any help would be greatly appreciated =)
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="JS/jquery.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function () {
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 600,
width: 800,
modal: true,
buttons: {
Cancel: function () {
alert("Cancel Button")
}
}
});
form = dialog.find("form").on("submit", function (event) {
alert("Submit");
event.preventDefault();
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
});
</script>
-
<div id="dialog-form" style="display: none">
<asp:Panel ID="AddReference" runat="server">
<form action=# id="form">
<asp:GridView ...>
<Columns>
...
</Columns>
</asp:GridView>
<input type="submit">
</form>
</asp:Panel>
</div>

I've taken your code and placed it into a JSFiddle and the alerts fire for me.
Have a look at the fiddle to see it working:
Demo
Your issue could be caused by any number of things:
1) An incorrect reference:
Open your browser's developer tools (F12) and click on console. Any JS errors will be listed there. I'm sorry if this is basic but from your example you are linking to jQueryUI but there is no reference to jQuery. You have to have both to work and if jQuery is referenced incorrectly, in the JS console you will see:
$ is undefined.
2) Incompatible Versions:
If it is not a reference error, make sure that you have a stable version of jQuery and jQuery UI. (The latest version of jQuery UI (v1.11.0) requires jQuery 1.6+ for example)
3) A Postback:
If you are using a hyperlink to trigger the dialogue, you need to cancel the dialogue's default action using either:
Prevent Default:
$("#create-user").button().on("click", function (e) {
//somecode
e.preventDefault();
});
or Return False:
$("#create-user").button().on("click", function () {
//somecode
return false;
});
Please note: In the fiddle example I have changed the width and the height of the dialogue so it fits into the output pane.

Dialog box conflict with an other script

I have a problem to integrate a Jquery UI dialog box in an other script. What i want to do is to detect user inactivity and after a certain inactivity time showed a dialog box to ask to continue or close session. My code :
<link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
</head>
<body>
<div id="dialog-confirm" title="Session expirée">
<p><span style="float:left; margin:0 0px 0px 0;"></span>Session expire, continue ?</p>
</div>
<script>
var theTime;
document.onmousemove=stockTime;
function stockTime() {
currentTime=new Date();
theTime=currentTime.getTime();
}
function verifTime() {
currentTime=new Date();
var timeNow=currentTime.getTime();
if (timeNow-theTime>10000) {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:190,
modal: true,
buttons: {
"Continue": function() {
$( this ).dialog( "close" );
},
"End": function() {
$( this ).dialog( "close" );
}
}
});
}
}
window.setInterval("verifTime()",2500);
</script>
My console send me that message : " TypeError: $(...).dialog is not a function ". I have no idea of where is the problem ...
Thanks for your help, and sorry for my bad english !

Check if all files are loaded in proper order
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Your remaining code is working fine.
Tested in JSBIN

where u added jquery? If u haven't added it, added it above it your script, and if you added it, then I think you added it below your script, move your script after jquery. and after doing this, load your script after dom loads as
$(function(){
//Put your Script here
})

html code wont show up after loading a html page with jquery

EDIT: How can I extend/edit "appended content" ?
I mean, If I have a div named "website" at "include.html" (the file which I appended using jquerys load) , Can I add text / code to that DIV after appending it?
I have a simple HTML menu page which Im trying to load to every page in my website.
Sorry if its a noob question ;) kinda noob with Jquery/js/html.
Here's one of the files:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cstyles.css">
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript' src='menu2.js'></script>
<script type='text/javascript' src='menu_load.js'></script>
</head>
<body>
<script>
loadContent();
$(document).on('mouseenter', "#menulist", function() {
mainmenu();
});
</script>
<div id="contact_us" style="background:blue;">Something</div>
</body>
</html>
Heres menu2.js:
function mainmenu() {
$(" #menulist li").hover(function () {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(300);
}, function () {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function () {
mainmenu();
});
heres menu_load.js:
function loadContent() {
$("body").load("include.html");
}
Problem is: After loading the menu successfully (the html file named INCLUDE.html), The content on the page "disappears"...
In this case, the word: something wont show up.
To be more clear, it will show up for a second and then will be replaced by the content on the "include.html" file.
Any suggestions?
thanks in advance!

This happens because the way $("#body").load() works. I would suggest changing that with
.prepend()

That's because you're loading the include.html file in the entire document. You should make a element with an id and load it there. For example
<div id="toload"></div>
Then your jquery function would be:
function loadContent() {
$("#toload").load("include.html");
}