i want to create a pop up window in phonegap jquery. Please help me out. i need click a button then it shows a popup that i have atached.
I don't think you can overlay above the status bar (time, battery info).
But if that isn't the problem... just add a div with an absolute position.
#myDiv {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.6);
z-index: 10;
display: none;
}
<body>
<div id='myDiv'>
<!-- add the fields/buttons here -->
</div>
</body>
<script>
//jQuery script
$('#myDiv').show();
</script>
Related
I'm working on a website where users can click on a link in the header and it toggles a class to make an element appear. This is working, but every time I try it the page goes back to the top. How can I prevent this?
This is my code:
function openModal(e) {
e.parentNode.classList.toggle("modal-open")
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.modal {
width: 100%;
height: 100vh;
background-color: red;
position: fixed;
top: 0;
left: 100%;
z-index: 999;
}
.modal-open .modal {
left: 0;
}
<header>
<p class="open" onclick="openModal(this)">Open</p>
<div class="modal" onclick="openModal(this)">
Content modal
</div>
</header>
Thanks for your answers!
The problem is in your CSS, do not use position: fixed unless it's very necessary. Instead use
position: absolute;
top: 0
Another thing I think it effects your code is the height:100vh
in short saying: there're nothing wrong in your JS, just alter the css:
I am using bootstrap 3 and jQuery. I have a div on my page right now that is 500 x 400 and it is sitting inside of a bootstrap row and col div. for example:
<div class="row">
<div class="col-lg-12">
<div id="myDiv"></div>
</div>
</div>
I want to use jQuery to tell this div to go full screen. When I click on my button to make it go full screen it seems to be locked inside of the bootstrap row and goes to 100% x 100% inside of the parent div. Is there anyway to tell #myDiv to eject from the parent that it is in and go full screen.
My css:
#myDiv{
z-index: 9999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
See this demo fiddle
CSS
#myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#myDiv{background:#cc0000; width:500px; height:400px;}
HTML
<div class="row">
<div class="col-lg-12">
<div id="myDiv">
my div
<button>Full Screen</button>
</div>
</div>
JS:
$('button').click(function(e){
$('#myDiv').toggleClass('fullscreen');
});
The trick is in setting position:fixed, by toggling the .fullscreen class. This takes it outside of the normal dom tree, so to speak, and sizes/positions it relative to the window.
HTH,
-Ted
JQuery
$('#button').click(function(){
$('#myDiv').css({"top":"0","bottom":"0","left":"0","right":"0"});
});
CSS
#myDiv{
z-index: 9999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
There is a little error in your css. Change the . to #.
How can I make a div area on the Google map iframe. Part of my code is ready here (http://thewebcookies.home.pl/test.html). That image (http://i.stack.imgur.com/92gkt.png) is an example what I want to get.
Add this div below the map iframe
<div class="modal">
<!-- text and input box go here -->
</div>
and add the following CSS
.modal {
width: 500px;
height: 160px;
background: #FFF;
position: absolute;
top: 100px;
left: 250px;
}
I'm currently building a website for myself and having some trouble styling it. By default the re are pagination buttons underneath the slider and a previous and next arrow. I managed to remove the pagination buttons, but am unable to position the next and previous button on top of the slider, these buttons should be vertical centered with the height of the containing images. I'm also having trouble with the height of the slider. The height should be the height of the images. The green part on my website is to much height.
I hope someone can help me!
Thanks a lot for in the advance!
http://test.epicconcepts.nl
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
#slides .slidesjs-container {
margin-bottom:0px;
}
.slidesjs-pagination {
display: none;
}
.slidesjs-previous.slidesjs-navigation {
/* Styles for the Previous nav button */
width: 32px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
z-index: 99;
background-image: url("..//img/prev.png");
}
.slidesjs-next.slidesjs-navigation {
/* Styles for the Next nav button */
width: 32px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
z-index: 99;
background-image: url("..//img/next.png");
}
.slidesjs-control {
background: orange;
max-height: 0px;
}
.slidesjs-container {
width: 100%;
background: green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 700,
autoHeight: true
});
});
</script>
I guess you since removed the slidesjs code from that URL, but I was having the exact same problem 10 minutes ago, so this is how I fixed it:
<div id="slides" class="slides">
<img src="images/1.jpg">
<img src="images/2.jpg">
<a href="#" class="slidesjs-previous slidesjs-navigation slides-button left">
<img src="images/arrow-left.png" /></a>
</div>
I just put 2 images and one navigation button for the sake of simplicity.
Then the CSS:
.slides { position: relative; } /* so the buttons are placed absolutety within this div */
.slides-button {
position: absolute;
top: 120px; /* the exact position over the slides, from slide's (0,0) */
}
Remember, the navigation buttons have to be <a class="slidesjs-previous slidesjs-navigation"> directly inside <div id="slides"> or they won't work, don't put Divs in the middle.
I have a loading mask that I would like to fadeOut() once the entire page has loaded. It works perfectly on the first time the user enters the page, but if they refresh, the loading mask disappears before the page has loaded. I have read quite a few articles out there and it seems that the common problem is that $(window)load usually doesn't fire events because of cache, but in my case it is fired too quickly upon refresh...What could be the issue?
1. <html>
2. <head><script type="text/javascript">
3. Ext.onReady(function() {....});
4. $(window).load(function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);});
5. </script></head>
6. <body>
7. <div id="loading-mask"></div>
8. <div id="loading">
9. <span id="loading-message">Loading Tibet...</span>
10. </div>
11. </body>
12. </html>
Any help or guidance would be greatly appreciated :)
Thanks,
elshae
Ok so I found out that it's best if JavaScript code is placed in the body..
So now I have all my code in the body including the Ext.onReady, so here goes...
<html>
<head></head>
<body onload="">
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading Tibet...</span>
</div>
<script type="text/javascript">
//Default blank image needed for some ExtJS widgets/if no image is found...
Ext.BLANK_IMAGE_URL = "./ext-3.2.1/resources/images/default/s.gif";
Ext.onReady(function() {
.............
});
//Outside Ext.onReady
window.onload = function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);}
</body></html>
//The css is:
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: #D8D8D8;*/
/* background: #6E6E6E;*/
background: #000000;
opacity: .8;
z-index: 1;
}
#loading {
position: absolute;
top: 40%;
left: 45%;
z-index: 2;
}
#loading span {
/*background: url('ajax-loader.gif') no-repeat left center;*/
background: url('globe.gif') no-repeat left center;
color: #BDBDBD;
width: 60%;
height: 30%;
padding: 60px 70px;
display: block;
}