Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Dear sir,
 
I have a Popup Code....
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>POPup</title>
		
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.leanModal.min.js"></script>
        
 
		<script type="text/javascript">
		    $(function () {
		        $('a[rel*=leanModal]').leanModal({ top: 200, closeButton: ".modal_close" });
		    });
		</script>
 
		
	</head>
	<body>
 

	 <a id="go" rel="leanModal" name="signup" href="#signup">Open</a>
		
		
		<div id="signup">
			<div id="signup-ct">
				<div id="signup-header">
					<h2>Create a new account</h2>
					<p>It's simple, and free.</p>
					<a class="modal_close" href="#"></a>
				</div>
				
				<form action="">
     
				  <div class="txt-fld">
				    <label for="">Username</label>
				    <input id="" class="good_input" name="" type="text" />
 
				  </div>
				  <div class="txt-fld">
				    <label for="">Email address</label>
				    <input id="" name="" type="text" />
				  </div>
				  <div class="txt-fld">
				    <label for="">Password</label>
				    <input id="" name="" type="text" />
 
				  </div>
				  <div class="btn-fld">
				  <button type="submit">Sign Up &raquo;</button>
</div>
 

 

 
				 </form>
			</div>
		</div>
 

		
	</body>
</html>
 

Here the popup will open When i click the Open Link.
Here we used a href tag...
 
I need to convert it into a function.
 
I need to open the popup when i call a function .
 
How to do this. please help me.
 

Thanks
 
Dileep...
Posted 7-Sep-12 23:54pm
dilzz1.2K
Edited 8-Sep-12 0:40am
v3
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Should not be doing something like this:
<input type="button" onclick="LaunchPopup()" />
function LaunchPopup()
{
  alert("Hi there!");
}
Did you try?
  Permalink  
Comments
enhzflep at 8-Sep-12 9:28am
   
Apparently you haven't! (tried your code)
This would appear to be not even close to what the OP is asking for..
The thing is, the onclick is attached to the <a> element with the following code:
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
The op would like to (a) react to an event (b) perform some action first (c) open the dialog.
 
I suggest you re-read the question. :)
Sandeep Mewara at 8-Sep-12 10:06am
   
Ok. My Bad, my assumption of auto comparing the simple implementation and use it.
 
As you say, changes will be:
$(function()
{ $('a[rel*=leanModal]').onclick = LaunchPopup()); });
 
function LaunchPopup()
{
// Do whatever you want.
// popup / alert/ anything
}
enhzflep at 8-Sep-12 10:22am
   
:grins:
Return to go DO NOT collect $200. This response is almost as effective as your first. But again, not what the OP is asking for..
 
1. Perform some action
2. Open modal dialog
 
Your code gets as far as step #1 (the trivial one) but doesn't go further...
Nice try though.
 
You could do worse than actually test your code, you know! (There was an error in it [ extra ) after LaunchPopup() ] AND it fails to achieve the stated aim)
Sandeep Mewara at 8-Sep-12 13:52pm
   
:)
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Okay, I've done some reading. According to someone that looked through the source, you need to use an <a> element to trigger the popup.
 
The suggestion is that you (a) make the triggering link hidden (b) attach an onclick handler as usual to your button (c) in the button's onclick function, call the onclick function of the triggering link.
 

Here's a trivial sample.
 
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script>
 
// standard initialization for leanModal
$(function() {
	$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });		
});
 
// onclick handler for a button that does some stuff before opening a leanModal dialog
function mySampleFunc()
{
	alert("Here we go!");
	$("#basicPopup").click();
}
 
</script>
<style>
#test 
{
	width: 600px;
	padding: 30px;
	display: none;
	background: white;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
</style>
</head>
<body>
	<a id="basicPopup" rel="leanModal" name="test" href="#test">Basic Popup</a>
	<button id="myBtn" onclick='mySampleFunc();'>Show alert then open dialog</button>
	<div id="test">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero purus, convallis nec vestibulum eget, luctus vitae purus. 
		Vestibulum non mauris et sem vulputate pellentesque ac a turpis. Ut vel lacus vitae justo vestibulum lobortis. 
		Nunc ipsum ipsum, laoreet id dictum nec, fermentum vel purus. Maecenas nisl felis, faucibus non rutrum eu, 
		sollicitudin sed ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dignissim 
		lacinia tempus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla 
		facilisi. Nulla accumsan pellentesque velit, a malesuada diam tristique a. Fusce eleifend magna erat, et imperdiet orci. Quisque 
		sapien mauris, malesuada eu tristique pulvinar, placerat id ligula. Vivamus vitae viverra nulla. Donec eget turpis vel erat malesuada sodales.</p>
	</div>
</body>
<html>
  Permalink  
Comments
dilzz at 9-Sep-12 11:18am
   
Thanks Bro... Thanks a lot..... this is what i am looking for last some days....
enhzflep at 9-Sep-12 11:26am
   
You're welcome mate. :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 8 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100