javascript - How to open a html page as popup within another html page - Stack Overflow

admin管理员组

文章数量:1294761

I am new to javascript. Now I have a link in home page which redirects to other html page, but I want to show that as a popup in my home page with responsiveness and some styles like a corner is folded.Is there any way to do that in javascript.

Thank you

I am new to javascript. Now I have a link in home page which redirects to other html page, but I want to show that as a popup in my home page with responsiveness and some styles like a corner is folded.Is there any way to do that in javascript.

Thank you

• javascript
• jquery
• html
• css

Share Improve this question Follow asked May 7, 2018 at 11:17 AshAsh 14711 gold badge11 silver badge1414 bronze badges 5

• w3schools./jsref/met_win_open.asp – VXp Commented May 7, 2018 at 11:57
• Thanks for the ment @VXp..I don't want it to open in other window.On same windpw it should load and also it should responsive – Ash Commented May 7, 2018 at 11:59
• Np, you have multiple examples, the first one opens as separate page but then you can set its width and height etc., you've said you want a popup, that's exactly what it is. – VXp Commented May 7, 2018 at 12:02
• yes @VXp..but it is not responsive. – Ash Commented May 7, 2018 at 12:18
• You need to make it responsive, that site that opens, of course it's not responsive by default. – VXp Commented May 7, 2018 at 12:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can simply use <iframe> to display the another page content in the modal content.

$(window).load(function(){
    $('#exampleModal').modal('show');
});

iframe {
    display:block;
    width:100%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <iframe src="www.google."></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

It's called "modal box", and here is how to do it: https://www.w3schools./howto/howto_css_modals.asp

As for styling, you can simply use CSS. For example to round corner in the linked example, just add e.g. border-radius: 25px; to .modal-content, so that you have

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  border-radius: 25px;
}

For folded corners in specific, there are also plenty of examples, e.g. https://codepen.io/brownerd/pen/lEHwL or https://stackoverflow./a/55457088/9593181

本文标签： javascriptHow to open a html page as popup within another html pageStack Overflow