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" );
}
}
]
});
Related
Making a dialog box with options to choose from, but when the text in the buttons is too long they stack beneath each other. I need it to stay next to each other (and maybe also extent beyond the width of the dialog box). Have tried different displays and floats but can't get anything to change...
I want it to look like this (I left out the CSS in this post so don't pay attention to that):
image of how I want it to look
Also: HAVE to use jQuery as it's for a school project...
The HTML:
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button id="click-button4">Attack</button>
<div id="dialog4">
<p>Which attack do you want to use?</p>
</div>
</body>
And the JavaScript / jQuery:
$("#click-button4").click(function () {
$("#dialog4").css("display", "block");
$(function() {
$("#dialog4").dialog({
buttons: [
{
text: "Use sword",
click: function() {
console.log("Use sword");
}
},
{
text: "Slap him",
click: function() {
console.log("Slap him");
}
},
{
text: "Scream at him",
click: function() {
console.log("Scream at him");
}
},
]
}).dialog("widget").find(".ui-dialog-title").hide();
});
});
Do you want something like this? I added a white-space: nowrap css property to the button text.
Jsfiddle: https://jsfiddle.net/Ln9rbs4c/1/
I am trying to display a dialog box when users access a page with a device smaller than a desktop. I am not an expert in jQuery. I tried the following below but was not successful.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
}).show();
} else {
$("ScreenSize").dialog().hide();
}
});
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
This code is executed on Dom ready. Considering that you open that dialog only in the if branch, actually the else branch is useless because when you reload the page, it doesn't get opened at all. Or maybe there is some other logic that you are not providing.
Then .dialog() is a method of the jQuery UI library. You should add also that library in order to get the dialog working. If you open your console you see that the method dialog() is undefined.
Your javascript code is OK. On the html part, jQuery and jQuery UI (for the dialog widget) scripts must be loaded in the correct order: jQuery first, UI after. Try the following code snippet, it works as you wanted.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true
}).show();
} else {
// this part is useless...
$("ScreenSize").dialog().hide();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<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>
</head>
<body>
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
</body>
</html>
Why is jQuery needed? Why not just use css media query to display and hide your dialog box.
CSS:
#ScreenSize {
display: none;
}
#media only screen and (max-width: 767px) {
#ScreenSize {
display: block;
}
}
i have used these following below in order to find a solution to my problem
$(function () {
if (screen.width < 1023) {
$("#ScreenSize").show();
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
resizable: false, draggable: false,
})
}
else {
$("#ScreenSize").hide();
}
});
<span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>
<div style="margin-left: 23px;">
<p>go to Text Box</p>
</div>
<//div>
Is it possible to prevent k-window-wtitlebar part of the Window class from absorbing click events?
I am inserting a form into the title of a window and find that I cannot click on any select boxes within the form, though buttons remain clickable. Is there any way to get the titlebar to let through click events but still allow the window to be dragged?
Here's a short sample that shows the problem -- the select box in the titlebar will flash a moment but then does not open. I'm not familiar enough with how Kendo is setup to figure this out easily, been bashing myself on this for a bit now. I know something is absorbing the click event and I've narrowed it down (I think) to k-window-titlebar. Any one have any ideas?
<link href="assets/ui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="assets/ui/styles/kendo.default.min.css" rel="stylesheet" />
<script src="assets/app/js/jquery.js"></script>
<script src="assets/app/js/jquery.form.min.js"></script>
<script src="assets/app/js/bootstrap.min.js"></script>
<script src="assets/app/js/bootstrap-toggle.min.js"></script>
<script src="assets/app/js/main.js"></script>
<script src="assets/ui/js/kendo.all.min.js"></script>
<style>
form {
display: inline;
}
</style>
<div class="shell">
<br><br><br><br>
<div id="window1" class="window">
<div class="client">
Test
</div>
</div>
<script>
$(document).ready(function() {
var myWindow = $("#window1");
myWindow.kendoWindow({
width: "400px",
height: "200px",
title: "Test window",
iframe: true,
visible: true,
actions: [
"Maximize",
"Close"
]
}).data("kendoWindow").center().open();
var $win = $('#window1');
console.log($win);
var $parent = $win.parent('.k-window');
console.log($parent);
var $title = $parent.find('.k-window-title');
console.log($title);
$title.append($('<form><select><option>one</option><option>two</option></select><button>test</button></form>'));
});
</script>
</div>
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
})
In my HTML page I generate a link, where users can grab to use for things. I need to somehow give the user the link where they can see the link and then copy the link to clip board.
I don't mean copy to clip board through code, just manually selecting the text and clicking ctrl+c or right click+copy is ok.
Is there a way I can create a popup box where it has text there that you can select and copy?
This needs to work with all browsers (IE8+) (Firefox) (Chrome) (especially IE8). So if I use alert box, I will not be able to copy the text so I can't use alerts.
Is there some really easy way that doesn't involve lots of code and also not using another HTML file for the popup box or something.
I can even use jquery if that makes it easy. Really, just a way to show a popup where the user can copy the text, and this is all done with code.
Thanks.
You could use jQuery ui .dialog()
JS:
$(function() {
$( "#dialog" ).dialog();
});
HTML:
<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>
You could try and use window.prompt() and do something like this: http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt where you can copy the text from the input, which can default to the link.
with jquery you can do something like this
$(function() {
$( "<div>Your text here </div>" ).dialog();
});
I'd user a overlaying div, which would appear on a click event. It would contain the text You would like to be able to copy and a close button. (using jQuery!)
First save Your div's content in a string variable. Let us call this variable divCont.
After this we create the overlaying div:
var docHeight = $(document).height();
$("body").append("<div id='overlayDiv'></div>").hide().fadeIn("slow");
$overlayDiv = $("#overlayDiv");
$overlayDiv.height(docHeight).css({
'opacity' : 0.9,
'position': 'absolute',
'top': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000,
'margin-left': 10%,
'margin-right': 10%,
'color': 'white'
});
Then we append the content of the $overlayDiv with our divCont string and we add a close button to it:
$overlayDiv.append(divCont+"<button id='close'>CLOSE</button>'");
After this we add a handler to the close:
$("#close").ready(function(){
$(document).on("click", "#close", function(){
$overlayDiv.fadeOut("slow", function(){
$overlayDiv.remove();
});
});
});
Link to working example -> fiddle
create a fixed div in the middle of the screen (or where ever you want it to be) with a input text box within it. You can trigger this structure whenever you generate a link.
check this fiddle
<div id = "clipboard">
<input type = "text"></input>
</div>
CSS style would be
#clipboard{
position: fixed;
left: 40%;
top: 40%;
width: 100px;
height: 30px;
border: thin solid grey;
}
#clipboard input{
width: 100%;
height: 100%;
}
you could use an iframe
--------opener.html
<html>
<head>
<title>modalopener</title>
<script language="JavaScript" type="text/javascript">
var modalWin = null;
function openModal() {
if (window.showModalDialog) {
modalWin = window.showModalDialog('modalchild.html',null,'dialogWidth=300px; dialogHeight=200px; status=0');
}
}
</script>
</head>
<body>
<b>open modal window</b>
</body>
</html>
--------modalchild.html
<html>
<head>
<title>Modal Child</title>
</head>
<body leftmargin="0" topmargin="0">
<iframe name="modalChild" width="100%" height="100%" src="modaliframe.html" frameborder="0"> </iframe>
</body>
</html>
--------modaliframe.html
<html>
<head>
<title>Modal Iframe</title>
</head>
<body leftmargin=0 topmargin=0 bgcolor="pink">
<div align="center"><br>
yahoo<br>
google<br>
hotbot
</div>
<script language="JavaScript" type="text/javascript">
// call this to reload
function loadIFrm(url) {
location = url;
}
</script>
</body>
</html>