"modal"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <a href="#" data-toggle="modal" data-target="#myModal04" /> <h2>Click</h2></a> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal04" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>In 2017, the Millennium gate Museum in collaboration with Stratasys and Kennesaw State University created a 3D printed Statue of Zeus. One of the Seven Wonders of the Ancient World — the Statue of Zeus at Olympia, designed by the Greek sculptor Phidias, was recreated for the 20th anniversary celebration of the Atlanta Centennial Olympic Games. The original statue endured almost 800 years around 435 BC before being moved or destroyed under unknown circumstances. Our model is based on the most accurate information available. Visitors to the Museum can experience the majesty of one of the Seven Wonders as well as iconic classical sculptures of Olympic athletes. It was a unique collaboration between universities and design institutes and at the time was the largest 3D printed classical monument.</p> </div> </div> </div> </div>
.modal .close { color: #ecaa2b; opacity: 1; font-weight: 100; border: 1px solid #ecaa2b; border-radius: 50%; padding: 2px 5px; position: absolute; right: 5px; top: 5px; } .modal .close span { position: relative; top: -1px; } .modal .modal-dialog { margin: 40px 0px !important; max-width: 600px; width: 90%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; }

Related: See More


Questions / Comments: