Showing posts with label links. Show all posts
Showing posts with label links. Show all posts

Tuesday 30 September 2014

Forms within modal-body in Twitter Bootstrap.

I've been working on a Twitter Bootstrap site recently. It contains modal which require a little interaction within the modal box itself. So here is an example of how to achieve this, this time using forms. First, I load the form into the modal, then I handle the form still within the modal. Most of the code is taken directly from the Twitter Bootstrap website. The only real difference is that I've loaded jQuery and the bootstrap.min.js before the body. I've highlighted the important parts in red.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>  
    <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">    Launch demo modal</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">      
        <form class="form-inline" role="form" method="POST" action="http.php">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" name="exampleInputEmail2" placeholder="Enter email">
  </div>  
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
(function()
{
  $('form').submit(function()
  {
    $.post($(this).attr('action'),$(this).serialize(), function(data)
    {
      $('#myModal .modal-body').append(data);
    });
    return false;
  });
})();
</script>
</body>
</html>

Get links to target modal-body in Twitter Bootstrap

I've been working on a Twitter Bootstrap site recently. It contains modal which require a little interaction within the modal box itself. So here is an example of how to achieve this, first using links (hyperlinks). Most of the code is taken directly from the Twitter Bootstrap website. The only real difference is that I've loaded jQuery and the bootstrap.min.js before the body. I've highlighted the important parts in red.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>  
    <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">    Launch demo modal</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <a href="hello.php" data-target="#myModal">Click me</a>
       </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
(function()
{
  $('a[data-target=#myModal]').click(function()
  {
    var target = $(this).attr('href');
    $('#myModal .modal-body').load(target);
    return false;
  });  
})();
</script>  </body>
</html>

Tuesday 24 September 2013

htaccess and HTML5 lines to force downloads

Here are a couple of tips to make life a little easier for your users with download links.
If you are running a Apache as your web server you can add the following line to your htaccess file:

AddType application/octet-stream .pdf

and/or ad a line like this within your HTML page:

<a href="document.pdf" download="document.pdf">Download the document</a>

In this case the pdf will automatically be downloaded when the user clicks on the link, rather than presenting them with a dialogue box asking them what to do.

Thursday 25 November 2010