Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 81
  • Last Modified:

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

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
Jasmine Ikhreishi
Asked:
Jasmine Ikhreishi
  • 2
1 Solution
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
 
leakim971PluritechnicianCommented:
just use the modals as described here : http://getbootstrap.com/javascript/#modals
test page : https://jsfiddle.net/83acg6zn/
0
 
Jasmine IkhreishiAuthor Commented:
I copied the test page but nothing popped up when I clicked login, do i need to add any links?
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now