Question

我希望我的原始页面上的用户能够单击一个链接，该链接会在另一个页面上打开弹出窗口并将用户重定向到该页面。我试过看，但是我的搜索结果不是很好，或者我的问题没有真正的答案。所以：第1页有链接，点击链接时=＆gt;第2页弹出窗口会在用户重定向后立即打开。

我不想要提醒，但我有一个实际的弹出窗口（tabindex =＆＃34; -1＆＃34;）。希望我能够清楚地解释清楚......

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

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

1 个答案: