I am just starting with jQuery Mobile I want to create popup.
I found the following example on the jQuery Mobile site:
Open Popup
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
Link button
Link button
</div>
That works very well. What I need now is to change that from an href to an onClick function like this below:
Open Popup
Its not working like that. What should I put to onClick to make it work?
Really appreciate your help.
You can use as below:
Create javascript function :
function openPopUp(){
$('#popupBasic').popup('open');
}
call openPopUp() in click event as below :
Open Popup
JSFiddle
Related
I dont know a lot about js and jQuery. I bought a WP theme and I want to do a few changes on it.
In this page: https://websitesdevs.com/search-services/
You can see a div with a text saying "Apply Filters" and when you click on it, it opens a popup with all the filters. The thing is that I want a search box, and then a button to open this popup with the filters.. I've been trying it but I can't do it.. I would like to open that popup with any other CSS class. Do you know how can I do it?
I think that the popup opens with this JS & jQuery script
//filter dropdown
jQuery('.mmobile-floating-apply,.wt-mobile-close').on('click', function() {
var _this = jQuery(this);
_this.parents('aside.wt-sidebar').toggleClass('show-mobile-filter');
});
This code is located at workreap_callbacks.js
Thanks for your time, I really need this
As far as I understand your question, you can run this:
$('.mmobile-floating-apply,.wt-mobile-close')
.parents('aside.wt-sidebar')
.toggleClass('show-mobile-filter');
from any place in your code.
is it possible to write script in DoJo that will automatically click on link with specific id? I have link:
<a href="overlay1" id="callMe" />
When you click on this link some dojo library will generate overlay with specific video etc. this is not important. So I need script that will call this link when you open page. How will it looks? So:
On load page find link with id callMe, simulate click on it.
You can use dojo/dom to select the link by it's ID and then call the links click() function
code example:
require(['dojo/dom', 'dojo/domReady!'], function(dom){
var callMe_link = dom.byId("callMe");
callMe_link.click();
})
working example: http://jsfiddle.net/kagant15/Ls41gecu/
I am using popup anywhere plugin in joomla. I have to display article page detail on that popup at time of user log in. But here popup close on click out side of popup screen also, i dont want this. Popup should only close at time of clicking "Agree" button that article have.
Please let me know if you have any other plugins or ideas.
This should prevent the window from being closed by clicking away from the element:
$('#your-close-button').click(function(e){
e.stopPropagation();
});
Joomla has a modal window as part of its core code, which is based on the mootools Squeezebox. You can call up an iframe in a modal window which cannot close like this:
<?php JHTML::_('behavior.mootools'); ?>
<a href="http://www.example.com/page2.html" class="modal"
rel="{closable: false, handler:'iframe'}">
Click here to launch a popup</a>
If you then want page2.html to have a close button, you should add this script to the parent window,
<script>
function closepopup() {
SqueezeBox.close();
}
</script>
and create the button like this:
CLOSE!
I figured out how to make a modal window pop up as the page loads, but I was wondering how I can make it appear also after clicking on a link, so that if a first time user comes to the website, closes the onload modal window, and then wants to sign up, he can do so.
I got the code from: http://www.aspdotnet-suresh.com/2013/03/open-show-jquery-popup-window-on-page.html
and the website that i'm using it on is http://thewildernesswalk.businesscatalyst.com/
If you have a better solution than the tutorial i found (which would be great), I am all ears, but it seems like some of the other answers i found out there mess with the code that makes the nav stick to the top and the "back to top" button appear.
Thank you in advance
Assuming the code at the link you gave, you may insert the following in your HTML <body> in order to show the modal upon clicking hyperlink:
Click me!
<script>
var elem = document.getElementById('hyper');
elem.onclick = showModal;
function showModal() {
$('.popup').show();
return false;
}
</script>
My app is written using HTML, Javascript, and Jquery Mobile.
On my HTML page I have an <a href> that calls a Javascript that opens a custom Alert box. I am using several Jquery Mobile elements on the page also, such as buttons and sliders. These elements are on top of my alert box when called.
Any idea how to make my alert box take complete focus when called?
Here is some code:
Index.html:
Click Here
<div id="AlertBox" class="alert" style="display:none" onClick="document.getElementById('AlertBox').style.display='none'">Message Here</div>
Javascript:
function DisplayAlert(id,left,top) {
document.getElementById(id).style.left=left+'px';
document.getElementById(id).style.top=top+'px';
document.getElementById(id).style.display='block';
}
function Alert() {
var something = false;
if(something) {
}
else {
DisplayAlert('AlertBox',100,50);
}
}
1) without jQuery Mobile - what you started above, here is a similar discussion:
jQuery: How can i create a simple overlay?
2) and also you can accomplish dialogs using just jQuery Mobile like so:
Open dialog
Docs:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-dialogs.html