Skip to content

Instantly share code, notes, and snippets.

@tarun-nagpal-github

tarun-nagpal-github/modal-mobile-web.html

Created September 9, 2019 06:14
Show Gist options
  • Save tarun-nagpal-github/65968523242a8072611455250ffa8e52 to your computer and use it in GitHub Desktop.
Save tarun-nagpal-github/65968523242a8072611455250ffa8e52 to your computer and use it in GitHub Desktop.
Download ZIP
modal-mobile-web.html
Raw
modal-mobile-web.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$(window).on('load',function(){
if ($(window).width() < 768) {
$('#mobileModal').modal('show'); /** for mobile**/
}
else {
$('#desktopModal').modal('show');
}
});
</script>
</head>
<body>
<div class="container">
<div class="modal fade" id="mobileModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Mobile Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
<div class="modal fade" id="desktopModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Desktop Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment