<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Out theme -->
<link rel="stylesheet" href="style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">Modal Header Color <small>Pluss my take on a wizzard like dialog</small></h1>
<div class="jumbotron">
<div >
<h2 class="jumbotron-header">Sample: how to change color in header of modal</h2>
</div>
<p>
<span class="help-block">
If you think you have a better solution I would appreciate it if you informed me by twitter <a href="https://twitter.com/virtueme">@virtueme</a> about your solution or fork my plunk.
</span>
<p>
<br>
<p class="text-center">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#colorfulHeader">Launch modal</button>
</p>
<p class="text-center text-muted">
Check out the style.css file to see the new styles added.
</p>
</div>
</div>
<div id="colorfulHeader" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="sampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-info">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="sampleModalLabel">Modal Header Color sample</h2>
</div>
<div class="modal-body">
<!-- Tab panes -->
<ul class="nav nav-tabs hidden">
<li class="active"><a href="#first" data-toggle="tab">First</a></li>
<li><a href="#second" data-toggle="tab">Last</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="first">
<h3 data-toggle="tooltip" data-placement="left" title="A sample of a horizontal form.">Your address information</h3>
<div>
<div class="well">
<form class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="name" class="col-sm-2 control-label" data-toggle="tooltip" data-placement="top" title="If you click here the full name input will be active.">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" data-toggle="tooltip" data-placement="top" title="Please add your full name here." placeholder="Full name">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label" data-toggle="tooltip" data-placement="top" title="If you click here the postal input will be active and you can add your address.">Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address" namme="address" placeholder="Address" data-toggle="tooltip" data-placement="top" title="Please add your address with housenumber (Apartement number if needed).">
</div>
</div>
<div class="form-group">
<label for="postal" class="col-sm-2 control-label" data-toggle="tooltip" data-placement="top" title="If you click here the postal input will be active and you can add your postal.">Poststed</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="postal" namme="postal" placeholder="Postnummer" data-toggle="tooltip" data-placement="top" title="Please add your Postal here">
</div>
<div class="col-sm-8">
<input type="text" class="form-control" id="city" namme="city" placeholder="Poststed" data-toggle="tooltip" data-placement="top" title="Please add your city city here.">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="tab-pane fade" id="second">
<h3>Last tab in sample <small>I hope you find that this sample is useful. </small></h3>
<div>
<h4>Why I use a helper class for the modal</h4>
<blockquote>
<p>
In my opinion this solution is in the spirit of how bootstrap use classe to be expressive This gives a more flexibel way to change the colors of a modal as you need to give information to the user.
</p>
</blockquote>
<h4>Why I use tabs to solve my problem</h4>
<blockquote>
<p>
I wanted a something that reminded as a wizzard.
This is my take on a problem I had. I have privious used the bootstrap carosel to solve the problem.
</p>
</blockquote>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="next" class="btn btn-primary" data-loading-text="Lagrer verver" autocomplete="off" placeholder="Poststed" data-toggle="tooltip" data-placement="left" title="Gå til betaling." onclick="">Next</button>
<button type="button" id="end" data-loading-text="closing modal" data-dismiss="modal" class="btn btn-primary hidden" autocomplete="off">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
(function($, undefined) {
'use strict';
$(document).ready(function () {
/*
* a simple solution to enable all
* tooltips on your page.
* Solution found here
* http://stackoverflow.com/questions/9446318/bootstrap-tooltips-not-working#answer-23200033
*/
$('[data-toggle=tooltip]').tooltip();
/*
* If you don't like the modal showing
* when you enter this sample just commit
* out line below this comment.
*/
$('div[role="dialog"]').modal('show');
$('#next').click(function (event) {
$(event.target).addClass('hidden');
$('#end').removeClass('hidden');
$('a[href="#second"]').tab('show');
});
});
})(jQuery);
/* Styles go here */
.jumbotron-header {
padding-bottom: 9px;
margin: 20px 0 30px;
}
.modal-success {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dff0d8), to(#c8e5bc));
background-image: -webkit-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: -moz-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: -o-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
border-color: #b2dba1;
border-radius: 6px 6px 0 0;
}
.modal-info {
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#d9edf7), to(#b9def0));
background-image: -webkit-linear-gradient(#d9edf7 0%, #b9def0 100%);
background-image: -moz-linear-gradient(#d9edf7 0%, #b9def0 100%);
background-image: -o-linear-gradient(#d9edf7 0%, #b9def0 100%);
background-image: linear-gradient(#d9edf7 0%, #b9def0 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
border-color: #9acfea;
border-radius: 6px 6px 0 0;
}
.modal-warning {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fcf8e3), to(#f8efc0));
background-image: -webkit-linear-gradient(#fcf8e3 0%, #f8efc0 100%);
background-image: -moz-linear-gradient(#fcf8e3 0%, #f8efc0 100%);
background-image: -o-linear-gradient(#fcf8e3 0%, #f8efc0 100%);
background-image: linear-gradient(#fcf8e3 0%, #f8efc0 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
border-color: #f5e79e;
border-radius: 6px 6px 0 0;
}
.modal-danger {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2dede), to(#e7c3c3));
background-image: -webkit-linear-gradient(#f2dede 0%, #e7c3c3 100%);
background-image: -moz-linear-gradient(#f2dede 0%, #e7c3c3 100%);
background-image: -o-linear-gradient(#f2dede 0%, #e7c3c3 100%);
background-image: linear-gradient(#f2dede 0%, #e7c3c3 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
border-color: #dca7a7;
border-radius: 6px 6px 0 0;
}