how to avoid user to click outside popup window javascript? - javascript

How to avoid user to click outside popup window javascript ?

If you want to avoid clicking of the content you can place a div with a fixed position over all the content. That prevents the user from clicking on everything that is not inside this div. I use this for some error reporting on a site.
Html:
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
Css:
div#error_wrapper {
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}

I think you're asking about a modal dialog box. If so, have a look at the jQuery UI modal dialog.
It will open up a dialog box with custom HTML content, and the rest of the page will be grayed-out and un-clickable. Is that what you want?

If you meant to ask "can you prevent users from clicking outside a popup window", no, you can't. At least not with JavaScript. Just imagine how annoying that would be.
You need "deeper" access to the browser than what a bunch of JavaScript sitting on a webpage has in order to do this.

Just make a popup div follow the cursor with a mousemoveevent! I can see some flaws with the method, though.

Related

How to know if the user is dropping the file on the defined location?

On this application, the user can drag and drop a file on the specified location. Let say here:
<div id="dropZone" style="width: 200px; height: 100px;"></div>
However, we noticed that no matter where the file is drop, the webpage will process it. Here is an example taken online https://jsfiddle.net/oL2akhtz/. There is a place to drop the file, but no matter where you leave it, it will stay. How to know if the user is droping the file in the right place? Or how do you disable the cursor if the user is not droping the file where it should be?
it actually only works on the dropzone because it has full width and height.
and the drag is set to window, when a user drags over the window, the div will be visible but will not receive any files
to fix it
Optimize the height and width:
div#dropZone {
background: gray;
position: fixed;
top: 0;
left: 0;
width: 30%;
height: 30%;
z-index: 999;
opacity: 0.6;
visibility: hidden;
}
I'm not sure, but if you tried to fix it by allowing and denying the user from dropping it outside the drag area, delete the functionality because it's useless.

Ui-grid: Opening a modal in filterHeaderTemplate

I would like to have a filter that would be a very basic kind of a modal window opened on a click event.
However, I am unable to display that window on top of a grid, when it is located in filterHeaderTemplate.
I created a very simple Plunker to reproduce that issue - the div is created correctly but it's hidden below the ui-grid and it happens for any z-index.
http://plnkr.co/edit/15oUIui2kWfPgE5CQXwk?p=preview
The templates is as simple as that:
<button ng-click="showModal = !showModal">Open \'Modal\'</button>
<div class="myModalClass" ng-if="showModal">My \'Modal\' Content</div>
and styles for the modal:
width: 200px;
height: 200px;
background-color: white;
border: 3px solid black;
position: absolute;
z-index: 999999999;
Any ideas would be really appreciated!
Solved :)
The problem was connected with top-panel and header-viewport overflow that is set to hidden by default.
The possible solution is to set it to visible:
.ui-grid-top-panel,
.ui-grid-header-viewport {
overflow: visible !important;
}

how to dispaly a javascript:popup dialog on top of a overlay to block the parent page

iam having a link tag on clicking it gives a another jsp as javascript:popup dialog.i need to block the page behind this popup dialog with a transperant page to diasable the controls on parent page.
this is my link
<a href="javascript:popupDialog('<c:url value="/addConfiguration" />', 'configDiv')" >click to add new configuration </a>
Add this code to the bottom of your html just before the closing </body> tag. (you can put the css in a different file if you wish, to organize things better).
<div id="page-blocker"></div>
<style type="text/css">
#page-blocker{
position: absolute;
position: fixed;
top: 0px;
left: 0px;
height: 100vh; /* View-port height */
width: 100%;
background-color: #000;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
display: none;
z-index: 999;
}
</style>
Now you can call $('#page-blocker').show(); to block the page and $('#page-blocker').hide(); to un-block the page. Use it from within the popupDialog() function and the one the hides the Dialog.
Note: You might want to set the z-index of this blocker to 999, if you have other Absolutely positioned elements on the page. And the z-index of the pop-up to 1999.

jQueryUI or BlockUI modal dialog over PART of a page

I want to have a modal dialog over part of a web page, just a div container. I know a bespoke solution is likely the answer but I'm wondering if BlockUI can apply it's modal overlay to a specific div only.
Google/stackoverflow has bared no fruit when asking if this is possible with jQueryUI or BlockUI.
Is modifying an existing overlay solution the only answer?
You can create a div with the particular dimensions and position, and then block that.
JS
$('body').append('<div id="blocker"></div>');
$('#blocker').block({message: null});
CSS
#blocker {
position: absolute;
top: 50px;
left: 100px;
height: 75px;
width: 150px;
}
Demo →

Puzzle: different domain iframe needs to dynamically "overlap" parent content

This should be a fun puzzle for you Stack Overflow geniuses:
I'm building a browser plugin that will inject a div, script, and iframe into the markup of whatever page the client is viewing. The purpose is to anchor a toolbar onto the bottom of every page (StumbleUpon does this for Chrome). Here's the code that is placed before </body>:
<div id="someID1" style="position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;">
<iframe id="someID2" src="http://www.example.com/iframeContent.html" frameBorder="0" scrolling="no" style="background-color: transparent; margin: 0px; height: 100%; width: 100%; padding: 0px;"/>
</div>
This toolbar (iframe) will be hosted on our server and has pop-out panels. When a user clicks to open a menu, the menu vertically extends the toolbar (e.g., toolbar height is 35px; with panel is 100px).
I can accomplish this in Safari, Firefox, and Chrome by having my toolbar sit on top of everything on a transparent background (i.e., height: 100% and background-color: transparent for both the div and iframe). But this doesn't work for IE7, IE8, IE9.
I've tried (1) doing background: blank.gif instead of background-color: transparent, and (2) injecting a script into the parent with a resizing function that I could call on with parent.resizeFunction(height) ("resource denied")
Any ideas on how to solve this?? Thanks so much!
I have to run so I can't test it, but IE seems to listen to the non-standard ALLOWTRANSPARENCY property.
When the property is set to false, the backgroundColor property of the object can only be that of the window. When the property is set to true, the backgroundColor property of the object can be set to any value, including the default value of transparent.

Categories

Resources