Twitter Bootstrap Modal Tutorial

Click to share! ⬇️

Modals are a fun way to add interactivity to your website. When a user needs to make a choice, or confirm an action, the classic jquery modal popup makes perfect sense. In this modal popup example, we’ll give users the option to greet using the built in modal of Twitter Bootstrap. We’ll start with the modal popup html and modal popup javascript to pass a value to a PHP file that can process our request. We’ll also take a look at skipping the javascript and passing the value via native HTML. Let’s jump in!

Using Javascript to Pass a Value


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modal Example</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
function triggerModal(avalue) {

	document.getElementById('the_id').value = avalue;

	jQuery('#myModal1').modal();

}
</script>
</head>

<body class="container">

	<div class="hero-unit">
    <h1>Would you like to Greet?</h1>
		<button type="button" class="btn btn-large btn-primary" onClick="triggerModal('Greetings From My Modal!')">Choose Now!</button>
	</div>

	
	<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<h3 id="myModalLabel">Really Cool Modal</h3>
		</div>
		<form method="post" id="action_submit" action="takeaction.php">
			<div class="modal-body">
				<input type="hidden" name="post_array_key" id="the_id" />
				<p>Choose Yes to greet, or No to dismiss.</p>
			</div>
			<div class="modal-footer">
				<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">No</button>
				<button class="btn btn-success">Yes!</button>
			</div>
		</form>
	</div>
	
	
</body>
</html>

Let’s review the code and the workflow.

First, ask the user a question in a Hero Unit.
Second, provide a button which has an onClick handler which will set a value to a hidden input, then launch our modal.
Third, the user clicks either Yes or No in the modal popup. If they choose No, the modal disappears via the data-dismiss attribute. If the user chooses Yes, the HTML form which is embedded in the modal is submitted to takeaction.php. At this point the line:


<input type="hidden" name="post_array_key" id="the_id" />

has actually been changed via our triggerModal function to:


<input type="hidden" id="the_id" name="post_array_key" value="Greetings From My Modal!">

So now, if we click Yes, we are actually submitting an HTML form to takeaction.php via the post method with a hidden input which has a name of post_array_key, and our value of Greetings From My Modal!.

Moving on over to the takeaction.php file which handles our request, we can see we simply echo out the value in a nice alert message:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>

<body class="container">

<div class="alert alert-success"><h1><?php echo $_POST['post_array_key']; ?></h1></div>

</body>
</html>

Submit a value using native HTML

Our first example was great fun, but a little simplistic. That’s ok though, since it gives us an idea of how modals work. Let’s kick it up a notch and post a tweet to twitter once we verify via our modal that we want to do so.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modal Example</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>

<body class="container">
<br>
<br>
<div class="hero-unit">
  <h1>Whats Up?</h1>
  <form method="post" id="action_submit" action="takeaction.php">
    <br>
      <textarea rows="3" name="post_array_key" style="width:500px"></textarea>
  </form>
  <button type="button" data-toggle="modal" data-target="#myModal1" class="btn btn-large btn-primary">Tweet it!</button>
</div>
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <h3 id="myModalLabel">Really Cool Modal</h3>
  </div>
  <div class="modal-body">
    <p>Are you ready to tweet?</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">No</button>
    <button type="submit" class="btn btn-success" onClick="jQuery('form').submit();">Yes!</button>
  </div>
</div>
</body>
</html>

Here we simplify things a bit since we no longer need to use the javascript triggerModal function to set a value before we launch the modal. In this new example, we can set our value by typing a message into the text area of the webpage, and *that* will be the value that gets sent to our takeaction.php file.

Our takeaction.php file looks like so:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>

<body class="container">
	<br>
	<br>
<?php
include ('config.php'); // your app tokens
include ('tmhOAuth.php'); // https://github.com/themattharris/tmhOAuth

$tweet = $_POST['post_array_key'];

$connection = new tmhOAuth(array(
    'consumer_key' => $consumer_key,
    'consumer_secret' => $consumer_secret,
    'user_token' => $user_token,
    'user_secret' => $user_secret,
	'curl_ssl_verifypeer'   => false
));



$code = $connection->request('POST', $connection->url('1.1/statuses/update'), array(
    'status' => $tweet
));
?>
	<div class="alert alert-success">
		<h1>Tweet Sent!</h1>
	</div>
</body>
</html>

You will have had to create a twitter application like we did in our post 3 Easy Steps to Creating Awesome Twitter lists via the Twitter API in order to complete this second example. We use a different Twitter API library in this new example so we can simplify the process.

You can see this code does work great!

Let’s Break it Down

First, ask the user What’s Up? in a Hero Unit, so they can type a tweet.
Second, we launch a modal when the user clicks Tweet It! This time around, via the magic of twitter bootstrap, we do not need to manually launch the modal with javascript. It gets called via the data-toggle and data-target attributes of the Tweet It! button.
Third, the user clicks either Yes or No in the modal popup. If they choose No, the modal disappears via the data-dismiss attribute. If the user chooses Yes, we submit the form with jQuery to takeaction.php.
At this point, takeaction.php receives the tweet text in $_POST['post_array_key']. We then take that data and post a request to the twitter api!

For more Twitter Bootstrap Goodness, head on over to our Twitter Bootstrap Series and start with What is Twitter Bootstrap? 🙂

Click to share! ⬇️