Solved

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

Posted on 2016-11-15
4
38 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Auto refresh part of an MVC5 View 7 57
How can I upload multiple images from a HTML form? 2 18
is this a cms? 8 34
Objects on Same Line 2 18
This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 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

19 Experts available now in Live!

Get 1:1 Help Now