flow page over current page

Question

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 ideas on how to do it?

Add your codes too. Let us see what you tried .. we will help you with ur code.. or make fiddle — Baezid Mostafa, Sep 23 '16 at 22:12
Try using the 'modal' in Bootstrap framework. You can alter the dimension of the modal. http://getbootstrap.com/javascript/ — Saumil, Sep 23 '16 at 22:13
It's because you are not asking for an answer, you are asking for a tutorial. — luissimo, Sep 23 '16 at 22:14

atjn · Answer 1 · 2016-09-23T22:27:00.593

1

The example you are talking about is loaded through an iframe. See an example below:

<iframe src="http://www.w3schools.com"></iframe>

I would guess the reason you normally get downvoted is because you pay no attention whatsoever to make your question nicely formatted or even correctly spelled.

Also, this is very basic knowledge. You can find documentation on it all over the web. There is absolutely no reason to ask the question again, so naturally people downvote you.

edited Sep 23 '16 at 22:27

answered Sep 23 '16 at 22:15

atjn

467
5
15

and i was looking for more than five days and couldn't find anything – aghed aljlad Sep 23 '16 at 22:19
Well, do a search for ["how to embed webpage into html"](https://www.google.com/search?q=how%20to%20embed%20webpage%20into%20html&rct=j), and there's no need to be angry anymore – atjn Sep 23 '16 at 22:23

Aya Salama · Accepted Answer · 2016-09-24T01:10:29.127

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

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>

thank you i had figured it out put a new problem accord i wanted to embed a video in the modal and the problem is when the modal fade out the video continue to play ?? — aghed aljlad, Sep 23 '16 at 23:16

score 1 · Answer 3 · edited May 23 '17 at 12:00

1

About your Problem with video Try to add this code to your js

$("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

Demo

you can find more info in this Question

edited May 23 '17 at 12:00

Community

1
1

answered Sep 23 '16 at 23:26

Aya Salama

1,458
13
17

thank you again @Aya your answers have been a great help for me – aghed aljlad Sep 23 '16 at 23:35

flow page over current page

3 Answers3