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

【问题标题】：A link to a page where a popup can open指向可以打开弹出窗口的页面的链接
【发布时间】：2017-08-28 17:00:20
【问题描述】：

我希望我的原始页面上的用户能够单击一个链接，该链接会在不同的页面上打开一个弹出窗口并将用户重定向到它。我尝试查找，但是我的搜索结果不是很好，或者我的问题没有真正的答案。所以：带有链接的第 1 页，当链接被点击时 => 第 2 页带有一个弹出窗口，一旦用户被重定向就会打开。

我不想要警报，但我有一个带有文本的实际弹出窗口 (tabindex="-1")。希望我解释得足够清楚...

【问题讨论】：

到目前为止，您为实现这一目标做了什么尝试？

标签： javascript html hyperlink

【解决方案1】：

为此，您需要创建两个页面。就像我在这里创建了一个示例一样。你也可以修改它。

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

<!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>

【讨论】：