How to open the popup when i call a function

Question

0.00/5 (No votes)

See more:

Dear sir,

I have a Popup Code....

HTML

<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 »</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

dilzz

Updated 8-Sep-12 0:40am

v3

Add a Solution

2 solutions

Solution 1

Should not be doing something like this:

HTML

<input type="button" onclick="LaunchPopup()" />
function LaunchPopup()
{
  alert("Hi there!");
}

Did you try?

Posted 8-Sep-12 2:47am

Sandeep Mewara

Comments

enhzflep 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 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 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 8-Sep-12 13:52pm

:)

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

enhzflep · Accepted Answer · 2012-09-08T05:21:00

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.

HTML

<!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>