2017-08-28 12 views
0

元のページに自分のユーザーがリンクをクリックすると、別のページにポップアップが表示され、そのユーザーにリダイレクトされます。 私は探してみましたが、私の検索結果が素晴らしくなかったか、私の質問に本当の答えがありません。 So: Page 1リンクがクリックされたとき=> Page 2ユーザがリダイレクトされるとすぐに開くポップアップが表示されます。ポップアップを開くことができるページへのリンク

私はアラートは必要ありませんが、実際のポップアップには(tabindex = " - 1")あるテキストがあります。 私はそれを十分に説明してくれることを願っています...

+0

そして、あなたがこれを達成するために、これまで試してみましたか? – RasmusGlenvig

答えて

0

そのためには、2ページを作成する必要があります。私はここで一つの例を作りました。あなたはそれを変更することもできます。

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> 
関連する問題