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.
Related
I've got a webpage that utilises bPopUp to pop up a modal window with jQuery.
The contents of that window are exactly what I would like to print (and nothing else on the main page).
I've tried linking a button on the popup window to run the command window.print(); but this just prints the whole page showing the popup window obscuring the rest of the page.
Does anyone know how I can only print the contents of the pop up window and nothing else?
Thanks
Sample HTMP
<div id='DivIdToPrint'>
<p>This is a Popup which needs to be printed.</p>
</div>
<div>
<p>Do not print.</p>
</div>
<input type='button' id='btn' value='Print' onclick='printDiv();'>
Javascript
function printDiv()
{
var divToPrint=document.getElementById('DivIdToPrint');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Give an ID to your Popup div and use above example.
You need to give inline styling to print the popup exactly.
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.
I created a mobile app using cordova and jQuery mobile as the UI framework. It is working fine, except that the click event on the jQuery mobile buttons does not trigger when clicking on the corners. I see a hover effect (button color change) when clicking at corner, but click event not triggered. Click event is triggered when clicked a little inside from button corner.
I am using jQuery mobile 1.4.2. Below is my button (anchor tag with class showOptions and ui-btn) markup and click handler:
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<img src="images/logo_small.png" class="appLogoImg dontDisplay ui-btn-left" style="margin-top: 6px;" />
<h1 class="ui-title">All Packages</h1>
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
Options
</div>
</div>
$('.showOptions').on('click', function() {
console.log('button clicked');
return false;
});
Is anybody out there also facing same issue? Please help me.
Instead of using <button> or <input type="submit">, it's better to use <a> (like you) with data-role="button" attribute.
Options
Anchors with data-role=button dont get wrapped with a .ui-btn div. Hence, you have will have the whole button responsive to any event.
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.
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