Full screen modal with search form

Developer
Jacob Lett
Size
2,754 Kb
Views
26,312
  1. Full screen modal with search form Previews
  2. Full screen modal with search form HTML Codes
  3. Full screen modal with search form CSS Codes

How do I make an full screen modal with search form?

Show a magnify glass icon and on click display a full screen modal with a search form. What is a full screen modal with search form? How do you make a full screen modal with search form? This script and codes were developed by Jacob Lett on 28 November 2022, Monday.

Full screen modal with search form Previews
IQ Test

Full screen modal with search form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full screen modal with search form</title> <script src="https://bootstrapcreative.com/wp-bc/wp-content/themes/wp-bootstrap/codepen/bootstrapcreative.js?v=1"></script> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="page-header"> <h1>Navbar with Full Screen Modal Search Form</h1> </div><!-- /page-header --> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li> <!-- Button trigger modal --> <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-default navbar-btn"> <span class="glyphicon glyphicon-search" aria-hidden="true" ></span>
</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> </div> <div class="modal-body"> <h1>Search</h1> <form class="navbar-form " role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div> </div> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>

Full screen modal with search form - Script Codes CSS Codes

/* Jacob Lett - https//BootstrapCreative.com - Reference / Refresh / Repetition */
.modal-header { border-bottom: none;
}
.modal-dialog { width: 100%; height: 100%; margin: 0; padding: 0;
}
.modal-backdrop {
background-color:#fff; opacity:1!important; border: 10px solid rgba(136, 136, 136, .4);
}
.modal-content { height: auto; min-height: 100%; border-radius: 0; background: none; box-shadow: none;
}
.modal-body { text-align: center;
}
.modal-body form { margin: 0 auto; float: none; width: 300px;
}
.modal-content .close { opacity: 1; font-size: 30px;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border: none;
}
Full screen modal with search form - Script Codes
Full screen modal with search form - Script Codes
Home Page Home
Developer Jacob Lett
Username JacobLett
Uploaded November 28, 2022
Rating 3
Size 2,754 Kb
Views 26,312
Do you need developer help for Full screen modal with search form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jacob Lett (JacobLett) Script Codes
Name
Adjust Bootstrap 4 Card Deck Responsive Breakpoint
Bootstrap 4 Off Canvas Side Menu Navbar
Section background colors - Bootstrap 4
Transparent background image jumbotron
Bootstrap Form Template
Bootstrap 4 Basic Image Slider
Bootstrap 4 Accordion Collapse toggle d-block
Bootstrap Sitemap Template - Chronological
Bootstrap Thank You Page Template
Bootstrap 4 Rounded Text Input and Textarea
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!