指向可以打开弹出窗口的页面的链接

Question

I want my user on my original page to be able to click a link which opens a popup on a different page and redirects the user to it. 我希望我的原始页面上的用户能够单击一个链接，该链接会在另一个页面上打开一个弹出窗口，并将用户重定向到该页面。 I tried looking but, either my search results weren't great or there is no real answer to my question. 我尝试查找，但是我的搜索结果不是很好，还是我的问题没有真正的答案。 So: Page 1 with a link, when the link is clicked => Page 2 with a popup that will open as soon as the user is redirected. 因此：带有链接的页面1，当单击链接时=>带有弹出窗口的页面2，该页面将在重定向用户后立即打开。

I do not want an alert, but I have an actual popup with text it has (tabindex="-1"). 我不需要警报，但是我有一个带有其文本的实际弹出窗口（tabindex =“-1”）。 Hope I explained it clearly enough... 希望我能解释得足够清楚...

Answer 1

For that, you need to create two pages. 为此，您需要创建两个页面。 Like I created one example here. 就像我在这里创建了一个示例。 You can modified that as well. 您也可以修改它。

First.html First.html

   <!DOCTYPE html>
<html>
    <body>
        <p>Click the button to open a new browser window.</p>
        <button onclick="myFunction()">Click here</button>
    <script>
    function myFunction() {
        window.open("second.html");
    }
    </script>

    </body>
</html>

second.html second.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <style type="text/css">
         #mask {
         position:absolute;
         left:0;
         top:0;
         z-index:9000;
         background-color:#000;
         display:none;
         }  
         #boxes .window {
         position:absolute;
         left:0;
         top:0;
         width:440px;
         height:200px;
         display:none;
         z-index:9999;
         padding:20px;
         border-radius: 15px;
         text-align: center;
         }
         #boxes #dialog {
         width:450px; 
         height:auto;
         padding:10px;
         background-color:#ffffff;
         font-family: 'Segoe UI Light', sans-serif;
         font-size: 15pt;
         }
         .maintext{
         text-align: center;
         font-family: "Segoe UI", sans-serif;
         text-decoration: none;
         }
         body{
         background: url('bg.jpg');
         }
         #lorem{
         font-family: "Segoe UI", sans-serif;
         font-size: 12pt;
         text-align: left;
         }
         #popupfoot{
         font-family: "Segoe UI", sans-serif;
         font-size: 16pt;
         padding: 10px 20px;
         }
         #popupfoot a{
         text-decoration: none;
         }
         .agree:hover{
         background-color: #D1D1D1;
         }
         .popupoption:hover{
         background-color:#D1D1D1;
         color: green;
         }
         .popupoption2:hover{
         color: red;
         }
      </style>
   </head>
   <body>
      <div class="maintext">
         <h2> Message</h2>
      </div>
      <div id="boxes">
         <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
            Popup Title
            <div id="lorem">
               <p>tabindex="-1"</p>
            </div>
         </div>
         <div style="width: 1478px; font-size: 32pt; color:white; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
      </div>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
      <script type="text/javascript">
         $(document).ready(function() {  

           var id = '#dialog';

           //Get the screen height and width
           var maskHeight = $(document).height();
           var maskWidth = $(window).width();

           //Set heigth and width to mask to fill up the whole screen
           $('#mask').css({'width':maskWidth,'height':maskHeight});

           //transition effect   
           $('#mask').fadeIn(500); 
           $('#mask').fadeTo("slow",0.9);  

           //Get the window height and width
           var winH = $(window).height();
           var winW = $(window).width();

           //Set the popup window to center
           $(id).css('top',  winH/2-$(id).height()/2);
           $(id).css('left', winW/2-$(id).width()/2);

           //transition effect
           $(id).fadeIn(2000);   

         //if close button is clicked
         $('.window .close').click(function (e) {
           //Cancel the link behavior
           e.preventDefault();

           $('#mask').hide();
           $('.window').hide();
         });   

         //if mask is clicked
         $('#mask').click(function () {
           $(this).hide();
           $('.window').hide();
         });   

         });
      </script>
   </body>
</html>

指向可以打开弹出窗口的页面的链接

问题描述

1 个解决方案

解决方案1
0 2017-08-28 09:00:20

指向可以打开弹出窗口的页面的链接

问题描述

1 个解决方案

解决方案1 0 2017-08-28 09:00:20

解决方案1
0 2017-08-28 09:00:20