CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Nevermore
Nevermore

Reputation: 882

Why is my modal not popping up in the page?

I have a modal which is supposed to pop up when I click the button. However, when I click the button; nothing happens:

Heres what I did:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>	
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
		<div class = "row text-center">
 			<input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save">
 			
  			<input class="btn btn-danger" id="reset-button" type="reset" value="Reset">


			<div class="well well-large">
				<div id="form-content" class="modal hide fade in" style="display: none;">
					<div class="modal-header">
						<a class="close" data-dismiss="modal">×</a>
						<h3>Add transaction</h3>
					</div>

					<div class="modal-body">
						<form class="transaction" name="transaction">
							<input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br>
							
							<label class="label" for="trans_payment_mode">Payment mode</label><br>
							<select class="form-control" name="trans_payment_mode" id="payment_mode" class="required">
								<option value="">Select</option>
								<option value="cash">Cash</option>
							</select><br>

							<label class="label" for="trans_amt">Transaction amount</label><br>
							<input type="text" name="trans_amt" class="input-xlarge"><br>

							<label class="label" for="trans_details">Transaction details</label><br>
							<textarea name="trans_details" class="input-xlarge"></textarea>
							
							<input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br>
							<input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br>
						</form>
					</div>

					<div class="modal-footer">
						<input class="btn btn-success" type="submit" value="Send" id="submit_trans">
						<a href="#" class="btn" data-dismiss="modal">Cancel</a>
					</div>
				</div>
			</div>

 			<div id="thanks">
 				<p><a data-toggle="modal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
 			</div>

		</div>
  </body>

I have the above modal containing add-transaction which will populate a modal. Please help.

Upvotes: 0

Views: 1665

Answers (2)

Daniel Apt
Daniel Apt

Reputation: 2638

It's a combination of a few issues.

  1. No need for the hide class on the modal
  2. No need for the display:none style on the modal
  3. Missing id of add-transaction on the modal

Upvotes: 1

blairmeister
blairmeister

Reputation: 915

CSS needs a bit work but you are missing a data_target class in your button. Add a div with an id and another div with the class modal-dialog.

Also change the line 

<div id="form-content" class="modal hide fade in" style="display: none;">

to

<div id="modal-content">

Other code changes

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

...

<p><a data-toggle="modal" data-target="#myModal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>

You can see it in the fiddle below

https://jsfiddle.net/4peLpye5/1/

EDIT - There is no php in the JSFiddle

Upvotes: 3

Related Questions