Question

我发现了一个非常漂亮的全屏模式，仅基于CSS。唯一的问题是，模态不可滚动。我尝试了不同的东西，但它没有用我正在使用这个脚本：

http://www.cssscript.com/accessible-fullscreen-modal-popup-with-pure-css-css3/

Answer 1

检查出来：

＆＃13;

$(function () {
  $(".modal").hide();
  $(".modal-launch").click(function () {
    $("body").addClass("modal-open");
    $(".modal").fadeIn();
    return false;
  });
  $(".close").click(function () {
    $(".modal").fadeOut(function () {
      $("body").removeClass("modal-open");
    });
    return false;
  });
});

＆＃13;

* {margin: 0; padding: 0; list-style: none; box-sizing: border-box;}

.modal {position: fixed; background-color: rgba(0,0,0,0.5); width: 100%; height: 100%;}
.modal .window {position: absolute; width: 70%; left: 15%; top: 15%; height: 70%; background-color: #fff;}
.modal .window .close {position: absolute; background-color: #f00; border: 2px solid #fff; border-radius: 100%; width: 32px; height: 32px; text-align: center; line-height: 20px; text-decoration: none; font-size: 1.5em; font-weight: bold; color: #fff; top: -16px; z-index: 3; right: -16px;}
.modal .window .wrap {overflow: auto; position: absolute; height: 100%;}

.modal-open {overflow: hidden;}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="modal">
  <div class="window">
    <a href="" class="close">&times;</a>
    <div class="wrap">
      <h2>Microsoft</h2>
      <p><b>Microsoft Corporation</b> <span class="nowrap"><span class="IPA nopopups"><a href="/wiki/Help:IPA_for_English" title="Help:IPA for English">/<span style="border-bottom:1px dotted"><span title="/ˈ/ primary stress follows">ˈ</span><span title="'m' in 'my'">m</span><span title="/aɪ/ long 'i' in 'tide'">aɪ</span><span title="'k' in 'kind'">k</span><span title="'r' in 'rye'">r</span><span title="/ɵ/ variable 1st 'o' in 'omission'">ɵ</span><span title="'s' in 'sigh'">s</span><span title="/ɒː/ variable 'o' as in 'coffee'">ɒː</span><span title="'f' in 'find'">f</span><span title="'t' in 'tie'">t</span></span>/</a></span></span> (commonly referred to as <b>Microsoft</b>) is an American <a href="/wiki/Multinational_corporation" title="Multinational corporation">multinational</a> <a href="/wiki/Technology_company" title="Technology company">technology company</a> headquartered in <a href="/wiki/Redmond,_Washington" title="Redmond, Washington">Redmond</a>, <a href="/wiki/Washington_(state)" title="Washington (state)">Washington</a>, that develops, manufactures, licenses, supports and sells <a href="/wiki/Computer_software" title="Computer software" class="mw-redirect">computer software</a>, <a href="/wiki/Consumer_electronics" title="Consumer electronics">consumer electronics</a> and <a href="/wiki/Personal_computers" title="Personal computers" class="mw-redirect">personal computers</a> and services. Its best known software products are the <a href="/wiki/Microsoft_Windows" title="Microsoft Windows">Microsoft Windows</a> line of <a href="/wiki/Operating_systems" title="Operating systems" class="mw-redirect">operating systems</a>, <a href="/wiki/Microsoft_Office" title="Microsoft Office">Microsoft Office</a> <a href="/wiki/Office_suite" title="Office suite" class="mw-redirect">office suite</a>, and <a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer</a> and <a href="/wiki/Microsoft_Edge" title="Microsoft Edge">Edge</a> <a href="/wiki/Web_browser" title="Web browser">web browsers</a>. Its flagship hardware products are the <a href="/wiki/Xbox" title="Xbox">Xbox</a> game consoles and the <a href="/wiki/Microsoft_Surface" title="Microsoft Surface">Microsoft Surface</a> tablet lineup. It is the <a href="/wiki/List_of_the_largest_software_companies" title="List of the largest software companies">world's largest software maker</a> measured by revenues. It is also one of the <a href="/wiki/List_of_corporations_by_market_capitalization" title="List of corporations by market capitalization" class="mw-redirect">world's most valuable companies</a>.</p>
      <p>Microsoft was founded by <a href="/wiki/Paul_Allen" title="Paul Allen">Paul Allen</a> and <a href="/wiki/Bill_Gates" title="Bill Gates">Bill Gates</a> on April 4, 1975, to develop and sell <a href="/wiki/BASIC" title="BASIC">BASIC</a> <a href="/wiki/Interpreter_(computer_software)" title="Interpreter (computer software)" class="mw-redirect">interpreters</a> for <a href="/wiki/Altair_8800" title="Altair 8800">Altair 8800</a>. It rose to dominate the <a href="/wiki/Personal_computer" title="Personal computer">personal computer</a> <a href="/wiki/Operating_system" title="Operating system">operating system</a> market with <a href="/wiki/MS-DOS" title="MS-DOS">MS-DOS</a> in the mid-1980s, followed by <a href="/wiki/Microsoft_Windows" title="Microsoft Windows">Microsoft Windows</a>. The company's 1986 <a href="/wiki/Initial_public_offering" title="Initial public offering">initial public offering</a>, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires from Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has <a href="/wiki/List_of_mergers_and_acquisitions_by_Microsoft" title="List of mergers and acquisitions by Microsoft">made a number of corporate acquisitions</a>. In May 2011, Microsoft acquired <a href="/wiki/Skype_Technologies" title="Skype Technologies">Skype Technologies</a> for $8.5 billion in its largest acquisition to date.</p>
      <p>As of 2015, Microsoft is market dominant in both the <a href="/wiki/IBM_PC-compatible" title="IBM PC-compatible" class="mw-redirect">IBM PC-compatible</a> operating system (while it lost the majority of the overall operating system market to <a href="/wiki/Android_(operating_system)" title="Android (operating system)">Android</a>) and <a href="/wiki/Office_software_suite" title="Office software suite" class="mw-redirect">office software suite</a> markets (the latter with <a href="/wiki/Microsoft_Office" title="Microsoft Office">Microsoft Office</a>). The company also produces a wide range of other software for desktops and servers, and is active in areas including <a href="/wiki/Web_search_engine" title="Web search engine">Internet search</a> (with <a href="/wiki/Bing" title="Bing">Bing</a>), the <a href="/wiki/Video_game_industry" title="Video game industry">video game industry</a> (with the <a href="/wiki/Xbox_(console)" title="Xbox (console)">Xbox</a>, <a href="/wiki/Xbox_360" title="Xbox 360">Xbox 360</a> and <a href="/wiki/Xbox_One" title="Xbox One">Xbox One</a> consoles), the digital services market (through <a href="/wiki/MSN" title="MSN">MSN</a>), and mobile phones (via the operating systems of Nokia's former phones and <a href="/wiki/Windows_Phone" title="Windows Phone">Windows Phone</a> OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the <a href="/wiki/Microsoft_Surface" title="Microsoft Surface">Microsoft Surface</a>, a line of <a href="/wiki/Tablet_computer" title="Tablet computer">tablet computers</a>.</p>
      <p>With the acquisition of Nokia's devices and services division to form <a href="/wiki/Microsoft_Mobile" title="Microsoft Mobile">Microsoft Mobile Oy</a>, the company re-entered the smartphone hardware market, after its previous attempt, <a href="/wiki/Microsoft_Kin" title="Microsoft Kin">Microsoft Kin</a>, which resulted from their acquisition of <a href="/wiki/Danger_(company)" title="Danger (company)">Danger Inc.</a></p>
      <p>Microsoft is a <a href="/wiki/Portmanteau" title="Portmanteau">portmanteau</a> of the words <b>micro</b>computer and <b>soft</b>ware.</p>
    </div>
  </div>
</div>
<a href="#" class="modal-launch">Launch</a>
      <h2>Microsoft</h2>
      <p><b>Microsoft Corporation</b> <span class="nowrap"><span class="IPA nopopups"><a href="/wiki/Help:IPA_for_English" title="Help:IPA for English">/<span style="border-bottom:1px dotted"><span title="/ˈ/ primary stress follows">ˈ</span><span title="'m' in 'my'">m</span><span title="/aɪ/ long 'i' in 'tide'">aɪ</span><span title="'k' in 'kind'">k</span><span title="'r' in 'rye'">r</span><span title="/ɵ/ variable 1st 'o' in 'omission'">ɵ</span><span title="'s' in 'sigh'">s</span><span title="/ɒː/ variable 'o' as in 'coffee'">ɒː</span><span title="'f' in 'find'">f</span><span title="'t' in 'tie'">t</span></span>/</a></span></span> (commonly referred to as <b>Microsoft</b>) is an American <a href="/wiki/Multinational_corporation" title="Multinational corporation">multinational</a> <a href="/wiki/Technology_company" title="Technology company">technology company</a> headquartered in <a href="/wiki/Redmond,_Washington" title="Redmond, Washington">Redmond</a>, <a href="/wiki/Washington_(state)" title="Washington (state)">Washington</a>, that develops, manufactures, licenses, supports and sells <a href="/wiki/Computer_software" title="Computer software" class="mw-redirect">computer software</a>, <a href="/wiki/Consumer_electronics" title="Consumer electronics">consumer electronics</a> and <a href="/wiki/Personal_computers" title="Personal computers" class="mw-redirect">personal computers</a> and services. Its best known software products are the <a href="/wiki/Microsoft_Windows" title="Microsoft Windows">Microsoft Windows</a> line of <a href="/wiki/Operating_systems" title="Operating systems" class="mw-redirect">operating systems</a>, <a href="/wiki/Microsoft_Office" title="Microsoft Office">Microsoft Office</a> <a href="/wiki/Office_suite" title="Office suite" class="mw-redirect">office suite</a>, and <a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer</a> and <a href="/wiki/Microsoft_Edge" title="Microsoft Edge">Edge</a> <a href="/wiki/Web_browser" title="Web browser">web browsers</a>. Its flagship hardware products are the <a href="/wiki/Xbox" title="Xbox">Xbox</a> game consoles and the <a href="/wiki/Microsoft_Surface" title="Microsoft Surface">Microsoft Surface</a> tablet lineup. It is the <a href="/wiki/List_of_the_largest_software_companies" title="List of the largest software companies">world's largest software maker</a> measured by revenues. It is also one of the <a href="/wiki/List_of_corporations_by_market_capitalization" title="List of corporations by market capitalization" class="mw-redirect">world's most valuable companies</a>.</p>
      <p>Microsoft was founded by <a href="/wiki/Paul_Allen" title="Paul Allen">Paul Allen</a> and <a href="/wiki/Bill_Gates" title="Bill Gates">Bill Gates</a> on April 4, 1975, to develop and sell <a href="/wiki/BASIC" title="BASIC">BASIC</a> <a href="/wiki/Interpreter_(computer_software)" title="Interpreter (computer software)" class="mw-redirect">interpreters</a> for <a href="/wiki/Altair_8800" title="Altair 8800">Altair 8800</a>. It rose to dominate the <a href="/wiki/Personal_computer" title="Personal computer">personal computer</a> <a href="/wiki/Operating_system" title="Operating system">operating system</a> market with <a href="/wiki/MS-DOS" title="MS-DOS">MS-DOS</a> in the mid-1980s, followed by <a href="/wiki/Microsoft_Windows" title="Microsoft Windows">Microsoft Windows</a>. The company's 1986 <a href="/wiki/Initial_public_offering" title="Initial public offering">initial public offering</a>, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires from Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has <a href="/wiki/List_of_mergers_and_acquisitions_by_Microsoft" title="List of mergers and acquisitions by Microsoft">made a number of corporate acquisitions</a>. In May 2011, Microsoft acquired <a href="/wiki/Skype_Technologies" title="Skype Technologies">Skype Technologies</a> for $8.5 billion in its largest acquisition to date.</p>
      <p>As of 2015, Microsoft is market dominant in both the <a href="/wiki/IBM_PC-compatible" title="IBM PC-compatible" class="mw-redirect">IBM PC-compatible</a> operating system (while it lost the majority of the overall operating system market to <a href="/wiki/Android_(operating_system)" title="Android (operating system)">Android</a>) and <a href="/wiki/Office_software_suite" title="Office software suite" class="mw-redirect">office software suite</a> markets (the latter with <a href="/wiki/Microsoft_Office" title="Microsoft Office">Microsoft Office</a>). The company also produces a wide range of other software for desktops and servers, and is active in areas including <a href="/wiki/Web_search_engine" title="Web search engine">Internet search</a> (with <a href="/wiki/Bing" title="Bing">Bing</a>), the <a href="/wiki/Video_game_industry" title="Video game industry">video game industry</a> (with the <a href="/wiki/Xbox_(console)" title="Xbox (console)">Xbox</a>, <a href="/wiki/Xbox_360" title="Xbox 360">Xbox 360</a> and <a href="/wiki/Xbox_One" title="Xbox One">Xbox One</a> consoles), the digital services market (through <a href="/wiki/MSN" title="MSN">MSN</a>), and mobile phones (via the operating systems of Nokia's former phones and <a href="/wiki/Windows_Phone" title="Windows Phone">Windows Phone</a> OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the <a href="/wiki/Microsoft_Surface" title="Microsoft Surface">Microsoft Surface</a>, a line of <a href="/wiki/Tablet_computer" title="Tablet computer">tablet computers</a>.</p>
      <p>With the acquisition of Nokia's devices and services division to form <a href="/wiki/Microsoft_Mobile" title="Microsoft Mobile">Microsoft Mobile Oy</a>, the company re-entered the smartphone hardware market, after its previous attempt, <a href="/wiki/Microsoft_Kin" title="Microsoft Kin">Microsoft Kin</a>, which resulted from their acquisition of <a href="/wiki/Danger_(company)" title="Danger (company)">Danger Inc.</a></p>
      <p>Microsoft is a <a href="/wiki/Portmanteau" title="Portmanteau">portmanteau</a> of the words <b>micro</b>computer and <b>soft</b>ware.</p>

＆＃13;

Css全屏模式不可滚动

1 个答案: