Solved

How can i make a popup form from clicking on a button

Posted on 2016-11-15
4
20 Views
Last Modified: 2016-11-15
I have this button:
<a href="#" class="btn btn-xlarge btn-info"><span class="glyphicon glyphicon-log-in"></span> Log-in</a>

Open in new window


<div class="container">
	<div class="row main">
		<div class="panel-heading">
	       <div class="panel-title text-center">
	           <img src="logo-small.png" alt="MarkitLive">
	               <hr />
	       </div>
	      </div> 
	<div class="main-login main-center">
		<form class="form-horizontal" method="post" action="#">
			<div class="form-group">
				<label for="username" class="cols-sm-2 control-label">Username</label>
					<div class="cols-sm-10">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
						<input type="text" class="form-control" name="username" id="username"  placeholder="Enter your Username"/>
					</div>
					</div>
			</div>

		<div class="form-group">
			<label for="password" class="cols-sm-2 control-label">Password</label>
			<div class="cols-sm-10">
			<div class="input-group">
					<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
					<input type="password" class="form-control" name="password" id="password"  placeholder="Enter your Password"/>
			</div>
			</div>
		</div>
		<div class="form-group ">
		<button type="button" class="btn btn-primary btn-lg btn-block login-button">Sign in</button>
		</div>
		<div class="login-register">
			<a href="http://markitlive.com/">A site owner? Log-in  through here! </a>
		</div>
		</form>
	</div>
	</div>
</div>

Open in new window


This form, How can I make it popup when I click on the login button?
0
Comment
Question by:Jasmine Ikhreishi
  • 2
4 Comments
 
LVL 32

Expert Comment

by:Big Monty
ID: 41888054
since you're already using bootstrap by the looks of it, I recommend using bootbox.js. It's a modal dialog box (aka popup box) that works with bootstrap. It's highly customizable, good documentation, and IMO, really easy to use.

in your specific case, you would just put your form HTML that you already have in a hidden container, then, when the user clicks a button, use that html as the contents for your bootbox html.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41888069
just use the modals as described here : http://getbootstrap.com/javascript/#modals
test page : https://jsfiddle.net/83acg6zn/
0
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41888082
I copied the test page but nothing popped up when I clicked login, do i need to add any links?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41888125
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now