Disable webpage like js alert do? - javascript

I am using custom dialog-box for confirmation message it will appear correctly but the back view of page is clickable/enable so user can click anywhere i want to disable that back view.
Just like native js alert, confirm box do.
Following is image of js alert box in which all back view is not accessible how do i achieve this thing when i am using my custom boxes.

Try this....
HTML:
<div id="alert-overlay-wrapper"></div>
CSS:
#alert-overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
Add the html div in the html of the custom alert box as well add the css.
This work as the overlay for the body.
The one thing you have take care is that the "z-index" of the custom alert box must be greater than 1000 as overlay z-index is 1000.

You may try jQuery Alert or a similar plugin.
Logic: Create a div with lightbox like effect. The lightbox will cover the entire page.

The best example of your situation is bootstrap modals Bootstrap modal
Just see how twitter developers do it.

You can try :-
Twitter boot strap modol box : Modol Box
jQuery Fancybox : Fancybox
jquery Colorbox : Colorbox

Related

use javascript to open :target css3 modal popup

I am using this css3 modal https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal
Not sure how to open and close it with javascript or jQuery
This opens on click via :target
Tried with $('#beforeYouGo').click() and document.getElementById("beforeYouGo").addEventListener('click', hide, false); with no results.It's first time when I use this css3 modal and not sure how to handle it.
I need to open it when user is moving mouse to leave the website, I have the function for that but can't target the modal.
Any help please?
Fixed with this, until I find a better solution:
on mouse leaving I use modal.addClass('active'); the css:
.modal.active,
.modal:target {
display: table;
position: absolute;
}
and for close modal.removeClass('active');

How to open a small box from a web page to make a choice

So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click

jQuery - slide down panel

I want to create a website where the user has to enter soma data. To make this as easy as possibble, i just show the main input elements and let a helper panel slide down if needed. As possible, these panels should be draggable (i am looking for javascript for that in the moment). My main problem is that when the panel slides down, the content at the top is shown first, but i want to slide down like shown below:
Is there any way to make this?
Thanks in advance.
Look at this JSFiddle.
This should show the principle to achieve this effect. You need a container div with overflow: hidden; and a child positioned to the bottom of the container div, then you can change the height of the container with jQuery to show/hide the content.
Also, to make the panels draggable, jQuery UI has a great function called draggable which works great. Give it a try.
Quick access: Fiddle: http://jsfiddle.net/VuPyL/1/ (updated) , BTW: I made it toggle-like.
Generally it seems to be only solve-able with animate,
if you dont want to have any wrapper element you would really like to use DOM's native property "scrollHeight" - that allows you to scroll always to bottom, in combination with a height toggle, it does exactly what you need.
Overflow: hidden dont have to be in the CSS - jQuery is adding it itself while toggling height.
This solution may seem a bit longer, but is more clear in what is actually happening :) :
HTML
<div id="helper-panel">
Here's
<br />
My
<br />
Content
</div>
<button id="show-helper">Show/hide Helper Panel</button>
CSS
#helper-panel{
height: 70px;
width: 375px;
position: relative;
overflow: hidden; /*optional - jQuery is adding it*/
display: none;
}
JS/jQuery
$('#show-helper').click(function(){
var $helper = $('#helper-panel');
$helper.animate({
height: "toggle"
},{
duration: 800,
progress: function(){
$helper.scrollTop( $helper[0].scrollHeight );
}
});
});
As suggested by #Andrew Pope to have item draggable/droppable it is best to use jQuery UI's draggables&droppables.
Also check sortable if you just want to change the order of the helper-menu items using drag&drop ;)
jQuery UI is not a standard part of jQuery - so dont forget to include it.
When using these it is good to wrap each draggable element. So the HTML would be:
<div id="helper-panel">
<div>Here's</div>
<div>My</div>
<div>Content</div>
</div>
And the jQuery (with jQuery UI):
$('#helper-panel').sortable() //make the items inside #helper-panel sortable
.disableSelection() //when sorting, you dont want selecting
.css('cursor','default'); //looks better with default cursor

javascript popup from scratch no libraries

I am trying to implement a lightbox / modal box type of popup in javascript without using jquery, scriptaculous, prototype or any library whatsoever.
I found a very good start right here on stackoverflow:
How to code a JavaScript modal popup (to replace Ajax)?
(no point repeating the code here)
I tried to make simple changes and all worked fine, i even added HTML content and it worked, but I am stuck on adding scrollbars, I did my research and found nothing since almost every answer you get on google is based on jquery (even all the other answers to the question I mentioned above include jquery!)
Any suggestions or links would be great,
thanks
I think this article named "CSS OVERLAY TECHNIQUES" will help you.
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
It provides several methods of accomplishing the above task without jquery.
For example one of the techniques described via this link is:
TECHNIQUE #1: ABSOLUTELY POSITIONED ELEMENT
The first way that an overlay can be created is by absolutely
positioning an HTML element on the page. There would be an empty div
in the markup, and with CSS this div is positioned absolutely and
given a high z-index value to make sure it stays on top of all other
elements on the page, except the modal which is opened on top of this
overlay, which will get a even higher z-index than the overlay.
<html>
<body>
<div class="overlay"></div>
<!--...-->
<body>
<html>
Supposing we have already added an empty div to the markup and given
it a class .overlay, the CSS to position this overlay on the page is:
html, body{
min-height: 100%;
}
body{
position: relative;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
If you want a modal dialog for real, use window.showModalDialog:
returnVal = window.showModalDialog(uri[, arguments][, options]);
where
returnVal is a variant, indicating the returnValue property as set by the window of the document specified by uri.
uri is the URI of the document to display in the dialog box.
arguments is an optional variant that contains values that should be passed to the dialog box; these are made available in the window object's window.dialogArguments property.
options an optional string that specifies window ornamentation for the dialog box.
Note that a real modal stops javascript execution (like alert, confirm and prompt do), unlike fake modal dialogs created with libraries like jQuery.

JavaScript: How to block the whole screen while waiting for ajax response

I have a screen in which there are different functions. There is a dropdown box onchange of which an Ajax call goes and a jsp page is returned in response. This response i then put inside a div below my dropdown box.
Now what i want is that untill this jsp is not filled in the div element the screen is blocked either by an alert box or some other dialog box.
How can i achieve this ?
You can use blockui jquery plugin from here. Call blockUI before making ajax call and unblockUI in your ajax callback.
#linusunis fed,
If you want to prevent the user from clicking on anything I suggest overlaying a div element & maybe making it semi-transparent. Below is CSS for the div & jQuery code to animate displaying the screen overlay and removing the screen overlay. Just call "block_screen" when you make your call & "unblock_screen" after you received the data & placed your new div on the page. This is just off the top of my head so you may need to double check for errors but it looks good to me.
You need to include jQuery on the page for this to work. Download it here: http://code.jquery.com/jquery-1.7.1.min.js
<style type="text/css">
.blockDiv {
position: absolute:
top: 0px;
left: 0px;
background-color: #FFF;
width: 0px;
height: 0px;
z-index: 10;
}
</style>
<script type="text/javascript" language="javascript">
function block_screen() {
$('<div id="screenBlock"></div>').appendTo('body');
$('#screenBlock').css( { opacity: 0, width: $(document).width(), height: $(document).height() } );
$('#screenBlock').addClass('blockDiv');
$('#screenBlock').animate({opacity: 0.7}, 200);
}
function unblock_screen() {
$('#screenBlock').animate({opacity: 0}, 200, function() {
$('#screenBlock').remove();
});
}
</script>
I would use Jquery and Jquery UI. Jquery UI provides a modal dialog in which you could place a loading message that will keep the user from clicking elsewhere on the screen.
http://jqueryui.com/demos/dialog/#modal
If you actually want to block the UI, just make the AJAX request synchronous.
Just use a boolean flag, which until is set (on receiving content), you lock the functionality. And once this flag is set, proceed further. Assuming you do have control over those functions.
you can use a div, along with z-index, opacity and cursor styling. although I don't know you application, blocking the entire page doesn't sound like a great user experience to me. perhaps you could place the div only over the affected area of the page

Categories

Resources