现有网页的自容器可关闭全屏模式覆盖

时间:2015-09-03 21:14:26

标签: javascript html css

请原谅我不包含任何代码,但我总是在与前端斗争。我发现了许多博客以及如何设置全屏模式显示,但所有这些都以某种方式破坏了我网站现有的CSS或JavaScript,其中一些是如何。任何人都可以向我指出一个简单的,自包含的示例,该示例可以保证成为已经有自己的事情发生的网站的直接解决方案吗?

1 个答案:

答案 0 :(得分:0)

我用Google搜索全屏模式和found this。正如你想象的那样接近解决方案的下降。您需要下载他们的lib。

取自他们的网站:

<head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>


<body>
    <!--Call your modal-->
    <a id="demo01" href="#animatedModal">DEMO01</a>

    <!--DEMO01-->
    <div id="animatedModal">
        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID  class="close-animatedModal" -->
        <div class="close-animatedModal"> 
            CLOSE MODAL
        </div>

        <div class="modal-content">
              <!--Your modal content goes here-->
        </div>
    </div>
</body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="yourPath/animatedModal.min.js"></script>

<script>
    //This is your script
    $("#demo01").animatedModal();
</script>