jQueryUI or BlockUI modal dialog over PART of a page - javascript

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 →

Related

iFrame in react DOM overrides page css

My entire react app css is being overridden by an iframe in the DOM, and I don't know how to get rid of it. I've tried deleting the bootstrap in node-modules.
I think the iframe creates a sort of sandbox with another copy of my enter root, and then disables it. All my CSS settings appear to be disabled, including toggle functions and clicks.
I can't seem to locate the iframe location in my DOM, and will like to either delete it or remove its inline style.
Any help will be greatly appreciated.
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
It is positioned right under the root div.

Load a div before other page content in WordPress

As the title says, I want to load a div in WordPress before any other content on the site. I'll explain it better: when a user loads the page, I want to show an animated intro, and then let him see the site after. How can I do that?
You'll want to create a fixed div that covers the screen to act as an overlay. Say you have a div: <div class="overlay">.
Now, in your CSS, you want to make that div take up the whole screen:
.overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
You also need to make sure your parent containers (html and body, most likely) have width/height of 100%. You might want to give your div another color so you can see it.
Also, reference this question.

Add header to any page with Javascript

I'd like to create a bit of embeddable code that a user can drop into their website that will load some Javascript. If some conditions are met, I'd like to add a small header to the top of the site, pushing down the rest of the content. Is there a simple way to do this that'll work on most websites?
I understand how to load and execute the JS - I guess I'm just wondering what the HTML/CSS would look like on both my header, and what would need to be altered on the user's site.
Have you considered using a floating header on top of their websites as opposed to shifting their entire website down? I think that'd be significantly easier.
That way you could just smack a div anywhere like so:
<div id="header">Whatever content</div>
<style>
#header {
left: 0px;
top: 0px;
width: 100%;
height: 30px;
background-color: black;
z-index: 1;
overflow:hidden;
min-width:280px;
position: fixed;
}
</style>
Or you could remove the position: fixed if that's too annoying and just make sure your div is on top.
jsFiddle
There is the bootsrap navbar: http://getbootstrap.com/examples/navbar/
Maybe solve your problem.

How to Show Div During Load with Pace.JS

I'm using Pace.JS to display a loader anytime I make AJAX calls to a REST service. Pace is working perfectly here except, the page is still interactive while the loader is spinning. I really don't want the page to be interactive while I'm trying to load data.
To fix this, I want to SHOW a div (white with a high opacity to simulate a modal) with a Z-Index of 1999 covering the entire page (width/height = 100%) while the Pace.JS loading animation is active (at Z-Index 2000 so it's sitting on top of the modal), and hide the div when the Pace.JS loading animation is complete to limit what a user can interact with while I'm loading data.
I've seen the events (start, restart, hide) on the Pace.JS hubspot homepage (http://github.hubspot.com/pace/) but there are no examples of actually using it and everything I've tried hasn't worked.
Can someone post an example of how to do what I'm looking for? It would really, really help me. Thanks!
You can achieve your goal with the following:
CSS:
div.paceDiv {
position: absolute;
width: 100%;
height: 100%;
...
display: none;
}
JS:
Pace.on("start", function(){
$("div.paceDiv").show();
});
Pace.on("done", function(){
$("div.paceDiv").hide();
});
Hope it's no too late though!
This is a old post, but i've fixed this just with css
pace-running::after {
position: absolute;
background-color: #ffffff;
opacity: 0.1;
top:0;
left: 0;
right: 0;
width: 100%;
height: 100%;
content: ' ',
z-index: 9998;}

how to avoid user to click outside popup window 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.

Categories

Resources