This is my first time using the jQUery Mobile popups. I've found documentation here and here. How I'm looking to create the following:
Now according to the doc's, the following code should work:
Open Popup
<div data-role="popup" id="popupBasic" data-dismissible="false">
<p>This is a completely basic popup, no options set.<p>
</div>
But given the code above I still keep getting the stock standard popup:
Any idea what I am doing wrong?
data-dismissible means whether you want the popup to close once clicked outside it. The default value is true, if you set it to false, you have to add a button with data-rel="back" to close it, jQM wont add a close button dynamically/automatically.
Change your markup to the following.
<div data-role="popup" id="popupBasic" data-dismissible="false" data-theme="c" data-overlay-theme="a">
<p>Click button to close this.</p>
Close
</div>
Note that data-theme and data-overlay-theme are different, the latter changes the color of the popup's overlay.
Or, you can close it programmatically.
$("#popupBasic").popup("close");
Demo
Related
A simple search on Google for popup scripts brings out thousands of results for popup plugins.. But I believe something this simple shouldnt need a plugin.
I want a simple popup script with no overlay that does basically 3 things:
Opens on the click of a button
Closes on the click of a cross
Is centered on the screen and is fixed
<div class="member-pop" id="member-pop1">
<a class="member-close1 cross"><img src="img/pop/pop-cross.png"
alt="Close" /></a> <! -- This will close Popup -->
<p>Content inside popup</p>
</div>
What I have done so far
$('.pop-member1').click(function() {
$('#member-pop1').show();
});
$('.cross').click(function() {
$(this).parent().hide();
});
This achieves 1 and 2. Number 3 still not achieved yet
$( "#member-pop1" ).dialog();
<div id="member-pop1" title="My dialog">
<p>This is where you show the content. Click on cross to close me!</p>
</div>
Makes use of jquery ui dialog.
So, after looking at many jquery modal plugins, I like the PopEasy ( http://thomasgrauer.com/popeasy/ ), but I copy and paste the provided code into a page on my server and no-workey.
Do the same with jsFiddle, same problem. The overlay fires, but the modal doesn't pop up. I'm sure that I'm doing one simple thing wrong.
http://jsfiddle.net/birchy/Kkw2L/5/
<a class="modalLink" href="#">Click Me
<div class="overlay"></div>
<div class="modal">
Close Me
content here
</div>
It appears to be a missing anchor close tag in the author's code.
Please, read all the question before thinking wrong things.
I'm trying to implement a Facebook Notifications system like, but I need some help for style this. I already make the notifications, the back-end works perfectly, but I'm using a workaround for style - and truste me, this is slow, ugly and can't provide to me a good way to style the source.
What I'm exatcly talking about is the actions that occurs between "user click in Notifications" and "user receive loaded Notifications". I'm talking about the style of this part. Things like "how I can open a box with loaded notifications?" after click in a button/div/image/text.
Okay, let's continue with that.
Now I'm using Fancybox to create my notifications box - yes, FANCYBOX! Following is the visual that I get with Fancybox after click in "notifications" button (the "0"):
This may appears beautiful for you, but for me it's ugly - and this is really, really slow.
For make this workaround, I disabled the images of Fancybox, so when it loads, it loads without the black background, the "X" to close the window and other things. Following is my code.
Partially responsable for header:
<!-- This is the html generated by Ruby on Rails,number is dynamic-->
0
<script>
$(document).ready(function(){
$(".various").fancybox({
openEffect: 'none',
closeEffect: 'none',
prevEffect: 'none',
nextEffect: 'none',
fitToView : false,
autoSize: false,
scrolling: 'auto',
maxWidth:300,
maxHeight:500,
padding: 0,
leftRatio: 0.86,
topRatio: 0.18
});
});
</script>
This is generated HTML of notifications/index/ (for pratical example):
<div class="post group">
<div class="notifications-content">
<div class="group" id="notification-0">
<div class="post-middle">
<div class="notifications-title">
<b>Bruno postou:</b>
</div>
<div class="post-middle-text">
ADO
</div>
<div class="post-middle-actions with-dots">
<label> Postado às 12:34 de 17 de October</label>
</div>
</div>
</div>
</div>
<div class="notifications-content">
<div class="group" id="notification-1">
<div class="post-middle">
<div class="notifications-title">
<b>Fernando Paladini postou:</b>
</div>
<div class="post-middle-text">
hummmmmmmmm #boilo
</div>
<div class="post-middle-actions with-dots">
<label> Postado às 12:36 de 17 de October</label>
</div>
</div>
</div>
</div>
<div class="notifications-content">
<div class="group" id="notification-2">
<div class="post-middle">
<div class="notifications-title">
<b>#Ramon Diogo postou:</b>
</div>
<div class="post-middle-text">
http://www.youtube.com/watch?v=A3zPI-DBf7U
</div>
<div class="post-middle-actions with-dots">
<label></label>
<label>Comentado às 12:47 de 17 de October</label>
</div>
</div>
</div>
</div>
</div>
How I can do that with just HTML, CSS and jQuery / JS? I mean, this effects of when click on button open a "box" with the loaded contents, and when click out closes the "box". I really, really have no idea how to make this. Actually I'm using Fancybox opening a modal, but I don't want open a model, I want make this like Facebook and sites like Trello do - just css/jquery.
Note that I'm not asking for code, I need help because I don't have any ideia how to do this. I want the instructions: what I need make to when click the button, open the notifications box. Or when click outside notification box, close the notification box. The concepts behind this, but I will consider if you post some code too, because will help me with the learning.
You can do that with absolute positioning on the div that contains your notifications.
It should be hidden as a default behavior and you make it visible on click with javascript.
This will help you: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/ but you should change the behavior to react to the click event instead of mouseenter (line 14 of the script part). Replace that part with something like:
$(this).click(function(e) {
$(this).find("ul").stop(true, true).slideDown();
e.preventDefault();
});
notice the "preventDefault part? that is to avoid the browser to enter the link when you click.
I have a problem with my jquery mobile popup. It shows only the data-overlay. The popup will be shown after a click in the contextmenu.
I'm making a redirect to a site, then I will open the popup.
$.mobile.changePage("#account"); //redirect
setTimeout(function(){
$('#popupCloseRight').popup("open"); // open the popup but shows only
},100); the grey overlay
HTML code:
<div data-role="popup" data-overlay-theme="a" id="popupCloseRight" class="ui-content" style="max-width:280px">
Close
<p>Check your E-mail</p>
</div>
Well, it is a jquery mobile bug , When im changing the size of the browser the popup will be shown.. but thanks.
What I'd like to achieve is a page that has a couple of buttons inside a div. When the user presses one of these buttons a dialog opens, asking follow up questions. After this the user is returned to the same page but the div with the buttons is hidden.
What I've tried is the following, inside a JQM page i have div called buttons which contains the buttons(logically). this opens the dialog and also calls a function which saves to local storage which button was pressed. Then the dialog opens which actually sends the data to the server.
For some reason the div is never hidden when I return from the dialog. I even tried to save a variable to the sessionStorage and hide the div on pageload, but seems that the page load event does not fire when returning from the dialog. Any suggestions or am I missing something basic?
<div class="ui-grid-b" id="buttons">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
// the dialog:
<div data-role="dialog" id="Popup" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Heading</h3>
<textarea name="comments" id="popuptextarea"></textarea>
<button type="submit" data-theme="b" onClick="save()">Selvä</button>
</div>
</form>
</div>
I have two javascript functions which try to save the data and also hide the div,
function savePushedButton(color) {
//save which button was pressed to local storage
$('#buttons').hide();
console.log("asd");
}
function save() {
//send data to server
}
onclick is your problem (onchange also), do not use it with jQuery Mobile. jQuery Mobile has already started transition to the dialog, before onclick has been triggered. You will need to manually bind a click event to the button and hide buttons before transition to dialog can occur.
Here's a working example: http://jsfiddle.net/Gajotres/uhsfs/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button', function(){
$('#buttons').hide();
savePushedButton($(this).attr('data-color'));
});
});
function savePushedButton(color) {
console.log(color);
$.mobile.changePage('#Popup', {transition: 'pop', role: 'dialog'});
}