aghed aljlad aghed aljlad - 2 months ago 14
CSS Question

flow page over current page

I have seen an amazing thing when surfing this website http://www.free-css.com/free-css-templates/page202/flat-theme when you click on live demo it opens another page over the current page without redirecting or opening another
window ,i wanted to make the same thing on my website,and i have tried a lot of things but none work??? any idea!!!!!
and please no vote down ,every time i ask question someone do it ,i have no idea why????

Answer

You are asking about iframe you can read more about it W3schools iframe

and about the popup you can use Bootstrap Modal

Here is a Demo for what you want so you can try it

code:

.btn {
    margin: 20px;
}
.modal-content {
    width: 800px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
         <!-- this is where you got the other page you want to show -->
.        <iframe src="http://www.w3schools.com/html/html_iframe.asp" height="500" width="750">
        
        </iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Comments