如何在主html頁面上顯示html彈出窗口？

-6

我一直在製作一個網站簡歷，我希望用戶能夠點擊我工作過的公司的照片，並對我的工作經歷進行描述。我可以點擊圖片，並有一個div彈出頂部如下所示：如何在主html頁面上顯示html彈出窗口？

如何可以這樣做的任何想法？

來源

2017-02-17 bsteven48

笏ü要到B做了什麼？ – Asad

我問你怎麼可以做一個彈出或笏？ @bsteven？ – Asad

在這個社區制定一個問題時，你需要做的更多努力。請搜索「如何問問」頁面，瞭解如何創建一個更好的問題的提示。 – AmericanUmlaut

您可以將CSS設置爲您想要在html頁面上顯示的彈出式div。考慮以下例如：

#mainPage { 
 
    width: 100%; 
 
    height: 100% 
 
} 
 

 
#popUp { 
 
    display: none; 
 
    z-index: 100; 
 
    width: 200px; 
 
    height: 50px; 
 
    background: #ADD; 
 
}

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div id="mainPage"> 
 
    <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" width="20%" /> 
 
    </div> 
 
    <div id="popUp"> 
 
    <p>Hello !!! It's a popup div </p> 
 
    </div> 
 
</body> 
 
<script type="text/javascript"> 
 
    $(function() { 
 
    $('#mainPage img').on('click', function() { 
 
     $('#popUp').show(); 
 
    }); 
 
    }); 
 
</script> 
 

 
</html>

來源

2017-02-17 06:56:43

如何在主html頁面上顯示html彈出窗口？

回答

相關問題