I am following a tutorial to create a simple modal, but the instructions explain how to open it from a button within the HTML that calls it.
<html>
<head>
</style>
<!-- Don't forget to include jQuery ;) -->
<script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- Modal HTML embedded directly into document -->
<div id="ex1" style="display:none;">
<p>Thanks for clicking. That felt good. Close or press ESC</p>
</div>
<!-- I WANT TO ACTIVATE THIS ACTION FROM A JAVASCRIPT FILE -->
<p>Open Modal</p>
</body>
</html>
If I wanted to open it from a linked js file, how could I do it?
Universal solution
For simplicity, assign an ID to that event:
<a id="testID" href="#ex1" rel="modal:open">Open Modal</a>
Then just trigger a click on that element.
JQuery:
$("#testID").click();
JQuery-Modal specific solution
Just call this to open a modal:
$("#testID").modal();
And to close programmatically, assign the ID "testClose" to some element within the modal, and run this to close the modal:
$("#testClose").modal({closeExisting: true});
Possible improvement for more nuanced control
I noticed that jquery-modal uses custom events such as "modal:open", so theoretically you could also call this:
$("#testID").trigger("modal:before-block");
$("#testID").trigger("modal:block");
$("#testID").trigger("modal:before-open");
$("#testID").trigger("modal:open");
However, this one did not work for me. Just use .click().
Related
I think there is a problem with my JavaScript. It's basically not working, no matter anything i try.
I have this VERY simple script:
<div id="simplediv" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;">Click anywhere in the document to auto-close me</div>
Click Here
And on this website it works:
http://www.javascripttoolbox.com/lib/popup/example.php
But when i add it to my own page:
<head>
<title>Script</title>
</head>
<body>
<div id="simplediv" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;">Click anywhere in the document to auto-close me</div>
Click Here To Show DIV
</body>
It won't work. i've also tried with other javascript codes inside the tags, and they all worked exactly on the website where I took it from, and I don't know why it doesn't work now.
Does anyone know why it's behaving like this?
As stated, the onclick="" Popup function is not defined; your browser doesn't know what this function is supposed to do.
Edit as you need, but putting something like this in your header would define your function:
<script type="text/javascript">
function showDiv(div_id){
document.getElementById(div_id).style.visibility="visible";
}
function hideDiv(div_id){
document.getElementById(div_id).style.visibility="hidden";
}
</script>
Then you would call these functions in your onclick="" event with the needed parameters. Similar to the following:
Click Here To Hide DIV
Click Here To Show DIV
I am sure I am just missing something basic, but can anyone see anything wrong with the following code? When I click the first button, it does not open a popup. The second button opens the popup as a dialog.
<!DOCTYPE html>
<html>
<head>
<!-- JQUERY MOBILE CSS -->
<link rel="stylesheet" href="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!-- JQUERY -->
<script src="//codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<!-- JQUERY MOBILE -->
<script src="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<p>Open Popup</p>
<p>Open Popup(dialog)</p>
</div>
</div>
<div id="menu-items" data-role="popup">
<ul data-role="listview">
<li>google.com</li>
<li>google.com</li>
</ul>
</div>
</body>
</html>
Indeed it's a small thing you're missing! =)
jQuery 1.3 Mobile Pop-up Docs:
...then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. This is a similar markup pattern to the dialog widget. A popup div has to be nested inside the same page as the link.
Move the <div id="menu-items"></div> to within the <div id="home" data-role="page"><div> node, then that should be it!
Working jsFiddle included. Dialogs are deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.
i think there are two things:
I). for opening a popup you have to place popup content inside the data-role='page'
II). for opening a dialog you have to place dialog content outside the data-role='page'
working fiddle : http://jsfiddle.net/REthD/10/
I have a website and I have this javascript code im going to place in the header below
<!-- GATEWAY -->
<script type="text/javascript" src="http://www.al.com/al.js"></script>
<script type="text/javascript">
al.check('f6687144358efd6746bc25f7c145f760');
</script>
Now I want to open that javascript when someone clicks on a button on my website. ( IMG HTML BUTTON )
What about putting it in the onclick?
<button onclick="javascript:al.check('f6687144358efd6746bc25f7c145f760');">
Click
</button>
I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
ON HEAD
<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->
ON BODY
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.
Try adding this after the $('#flier').reveal();
$('#flier').trigger('click');
This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case, #flyer have the attribute "data-reveal-onready").
Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>
And change the call to this:
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#triggerflyermodal').click();
});
</script>
EDIT:
Your loading jQuery library twice!
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
And
<script src="js/jquery.min.js" type="text/javascript"></script>
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!
<html>
<head>
<script type="text/javascript">
// jquery and javascript functions
</script>
</head>
<body>
<fancy-jquery-ajaxy-html-section>
</fancy-jquery-ajaxy-html-section>
<noscript>
sorry you came to the wrong place - this site is all jquery/ajaxy stuff.
</noscript>
</body>
</html>
I tried surrounding <fancy-jquery-ajaxy-html> with a <script type="text/javascript"></script> but then nothing from that section is displayed even for users with javascript enabled.
But what I want to do is hide that <fancy-jquery-ajax-html> section only if the user doesn't have javascript enabled.
It contains content that is useless to someone without javascript turned on, so it shouldn't be shown at all.
A user with javascript disabled should only see a message saying that the page can't be viewed without javascript.
Is there a way do that?
The easiest way is to hide the section with CSS (e.g. display:none), then show it through Javascript.
EDIT: just a little example
<div>Everyone sees this div</div>
<div id="mydiv" class="hidden">You see this div only with JS enabled</div>
<script type="text/javascript">
$("#mydiv").removeClass("hidden");
</script>
<noscript>
<div>You will see this div only with JS disabled</div>
</noscript>
And, of course, in your CSS:
.hidden
{
display: none;
}
You could hide your fancy section using css:
<div id="fancy_jquery_ajax" style="display: none;">
</div>
then you could use use JavaScript to display the element:
$("#fancy_jquery_ajax").css("display", "block");
I hope that's right, I actually don't use jQuery that much. :S
Another approach would be to generate that HTML using JavaScript, so it can't appear unless JavaScript is running.
What I did is to have my javascript hide the nojsdiv and show maindiv. This way, if you don't have javascript the message shows up.
<body onload="allowlogin()">
<div id="maindiv" style="visibility: hidden;">
...
</div>
<div id="nojsdiv">
The training system requires javascript to be enabled.
</div>
</body>
I prefer to add a class of .js to html tags as soon as jQuery has loaded. This allows my to write css rules that apply only when the user has javascript enabled/disabled. This keeps your show and hide code out of our JS and lets CSS do its job and style the page
Here's how I would approach your problem:
<html>
<head>
<style type="text/css">
.js #fancy_jquery_ajax {display: none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('js');
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready
});
</script>
</head>
<body>
<div id = "fancy_jquery_ajax"></div>
<noscript><!-- stuff to say if use had javascript disabled --></noscript>
</body>
</html>
It's important to note that we want to add the class of .js as soon as jQuery has loaded and not add it in our document.ready handler. Otherwise we'd be back to square one.