130 lines
6.3 KiB
HTML
130 lines
6.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Bootstrap modal: close current, open new</title>
|
||
|
|
<link href='https://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>
|
||
|
|
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||
|
|
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<div class="container">
|
||
|
|
<h1>Bootstrap modal: close current, open new</h1>
|
||
|
|
<p class="text-muted">
|
||
|
|
A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this
|
||
|
|
<a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
|
||
|
|
</p>
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
|
||
|
|
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
|
||
|
|
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>
|
||
|
|
|
||
|
|
<!-- [ Modal #1 ] -->
|
||
|
|
<div class="modal fade" id="demo-1" tabindex="-1">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
|
||
|
|
<div class="modal-header">
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
|
|
<h4 class="modal-title caps"><strong>Demo Modal #1</strong></h4>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="input-group">
|
||
|
|
<input type="text" class="form-control" placeholder="Input Placeholder..." />
|
||
|
|
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">×</button>
|
||
|
|
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
|
||
|
|
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- [ Modal #2 ] -->
|
||
|
|
<div class="modal fade" id="demo-2" tabindex="-1">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
|
||
|
|
<div class="modal-header">
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
|
|
<h4 class="modal-title caps"><strong>Demo Modal #2</strong></h4>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="input-group">
|
||
|
|
<input type="text" class="form-control" placeholder="Input Placeholder..." />
|
||
|
|
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">×</button>
|
||
|
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
|
||
|
|
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- [ Modal #3 ] -->
|
||
|
|
<div class="modal fade" id="demo-3" tabindex="-1">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
|
||
|
|
<div class="modal-header">
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
|
|
<h4 class="modal-title caps"><strong>Demo Modal #3</strong></h4>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="input-group">
|
||
|
|
<input type="text" class="form-control" placeholder="Input Placeholder..." />
|
||
|
|
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">×</button>
|
||
|
|
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
|
||
|
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
<h3 class="caps">Usage:</h3>
|
||
|
|
<pre class="prettyprint"><!-- Button trigger modal -->
|
||
|
|
<ANY data-toggle="modal" data-target="TARGET">...</ANY>
|
||
|
|
|
||
|
|
<div class="modal fade" id="SELECTOR" tabindex="-1">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-body"> ... </div>
|
||
|
|
<div class="modal-footer"> <!-- ↓ --> <!-- ↓ -->
|
||
|
|
<ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div></pre>
|
||
|
|
</div> <!-- end .container -->
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
<footer class="text-center"><a href="#">@2019</a></footer>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<!-- partial -->
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||
|
|
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js'></script>
|
||
|
|
</body>
|
||
|
|
</html>
|