瞭解哪個div被最終用戶點擊，同時打開模式窗口

我想在用戶創建一些超鏈接時打開模式視圖。網頁上會有很多超鏈接，所以我想了解哪個div與被點擊的超鏈接相關，我應該將用戶作爲模態視圖呈現。瞭解哪個div被最終用戶點擊，同時打開模式窗口

我寫的代碼是：

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title> Test</title> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> 

     <script> 

      function OpenModal() { 
       $("#divModal").dialog({ 
        autoOpen: false, modal: true, title: 'Modal', width: 'auto', height: 'auto' 
        , buttons: { "Cancel": function() { $(this).dialog("close"); } }, 
       }).dialog('open'); 
       return false; 

      } 
     </script> 
    </head> 

    <body> 
     <a href="#" onclick="javascript:OpenModal();">View Page</a> 
     <div style="display:none;" id="divModal" > 
      <iframe id="myIframe" src="/menu.php" width="1000" height="800" ></iframe> 
     </div><br /> 
     <a href="#" onclick="javascript:OpenModal();" >Trip Planning</a> 
     <div style="display:none;" id="divModal2" > 
      <iframe id="myIframe2" src="tripplanning.php" width="1000" height="800"></iframe> 
     </div><br /> 
    </body> 
</html>

所有我想要的就是讓#divModal在OpenModal功能動態的，點擊DIV也是應該的。

我很感激，如果有人幫助。謝謝。

編輯：我應該怎麼做，如果有一個特定的<a>應該重定向用戶到另一個頁面，而不是顯示模態視圖？我如何在js函數中檢查它？

<a href="#divRedirect1">Find a bus</a> 
    <div style="display:none;" id="divRedirect1" > 
     <iframe id="myIframe3" src="/transit/findbus.php" width="800" height="600"></iframe> 
    </div>

例如，這裏如果用戶點擊'查找公交'，用戶應該去findbus.php，看不到模態視圖。

謝謝。

編輯2：我剛剛通知說，這個問題的選定正確答案也建議我使用類，同時定義<a>標籤。所以我遵循他的建議。這個問題已經解決了，如：

<a href="#divModal" class="displayModalView">Trip Planning</a> 
    <div style="display:none;" id="divModal" > 
     <iframe id="myIframe1" src="/transit/access_a_bus.php" width="800" height="600"></iframe> 
    </div> 
<a href="/transit/findbus.php" class="justRedirect">Find a bus</a> 

<script> 
    $(function() { 
     $('.displayModalView').click(function(e) {... //same what he wrote...} 
    }); 
</script>

來源

2015-10-14 Eray Balkanli

首先，改變a元素的href屬性是一個選擇的div要在轉向一個模式，並刪除過時的onclick屬性。

<a href="#divModal">View Page</a> 
<div style="display:none;" id="divModal" > 
    <iframe id="myIframe" src="/menu.php" width="1000" height="800" ></iframe> 
</div><br /> 

<a href="#divModal2">Trip Planning</a> 
<div style="display:none;" id="divModal2" > 
    <iframe id="myIframe2" src="tripplanning.php" width="1000" height="800"></iframe> 
</div><br />

然後，您可以連接到這些a元素在JavaScript中單擊事件：

<script> 
    $(function() { 
     $('a').click(function(e) { 
      e.preventDefault(); 
      var target = $(this).attr('href'); 
      $(target).dialog({ 
       autoOpen: false, 
       modal: true, 
       title: 'Modal', 
       width: 'auto', 
       height: 'auto', 
       buttons: {     
        "Cancel": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }).dialog('open'); 
     }); 
    }); 
</script>

我會建議你做a選擇一個更具體一點，通過使用一類，但是這將工作給你的問題的HTML。

來源

2015-10-14 16:05:02

謝謝羅裏！ 7分鐘後，我會將你的答案標記爲正確答案。讚賞 –

沒問題，很高興幫助 –

嗨@Rory，我添加了一個小問題。如果你有空，你能再幫我一次嗎？請參閱編輯部分 –

瞭解哪個div被最終用戶點擊，同時打開模式窗口

回答

相關問題