Twitter Bootstrap Modal Tutorial

javascript popup modal

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

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:

has actually been changed via our triggerModal function to:

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:

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.

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:

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!

post to twitter via twitter api

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? 🙂