BigCoke

用jQuery实现自定义弹出窗口
前言  想实现提示内容,直接用alert('')是不是太难以接受了,虽然现在很多浏览器aler...
扫描右侧二维码阅读全文
21
2019/02

用jQuery实现自定义弹出窗口

前言

  想实现提示内容,直接用alert('')是不是太难以接受了,虽然现在很多浏览器alert的样式都是优化得很好看的,但是同一个浏览器的alert在任何网站上都一个样式,太没有个性了。
  然后我在刚才写插件的时候想出来一个办法,分享一下

思路

  我们可以先写一个div,把要弹出的内容全部放在这个div中,然后再给他加上一个class,把这个class的样式定义为display:none,那么它默认就是不可见的,需要它弹出(可见)的时候,就用jQuery移除这一个class,需要关闭他的时候,就再次add这个class

代码

首先写html,将我们要弹出的内容放在一个div里。

<div class="window unvisible">
<p>我是弹出的内容</p>
</div>

然后是css.

.unvisible{
    display:none;
}
.window{
    position:fixed;/* 使窗口不影响其他元素,并且无论在哪窗口都在一个位置 */
    background:white;/* 为了不让div透明 */
    z-index:9999999;/* 防止其他元素位于窗口之上 */
    box-shadow:0 0 12px #808080;
    -webkit-box-shadow:0 0 12px #808080;
    top:10vh;
    bottom:10vh;
    left:18vw;
    right:18vw;
    padding:1em;
}
.window button{
    display:inline;
    font-size:1em;
    border:none;
    background:white;
}

最后是js

function OpenWindow() {  
    $(".window").removeClass('unvisible');//移除“不可见”class,使窗口打开
}
function CloseWindow() {  
    $(".window").addClass('unvisible');//添加“不可见”class,隐藏、关闭窗口
}

演示

先放上一段完整的代码

<style>
.unvisible{
    display:none;
}
.window{
    position:fixed;/* 使窗口不影响其他元素,并且无论在哪窗口都在一个位置 */
    top:10vh;
    bottom:10vh;
    left:18vw;
    right:18vw;
    padding:1em;
    background:white;/* 为了不让div透明 */
    box-shadow:0 0 12px #808080;
    -webkit-box-shadow:0 0 12px #808080;
    z-index:9999999;/* 防止其他元素位于窗口之上 */
}
.window button{
    display:inline;
    font-size:1em;
    border:none;
    background:white;
}
</style>

<button onclick="OpenWindow()">Try to click me</button>

<div class="window unvisible">
<h2>一个提示框框<button onclick="CloseWindow()" style="float:right;">×</button></h2>
<p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>
<script>
function OpenWindow() {  
    $(".window").removeClass('unvisible');//移除“不可见”class,使窗口打开
}
function CloseWindow() {  
    $(".window").addClass('unvisible');//添加“不可见”class,隐藏、关闭窗口
}
</script>

尝试点击这个按钮。

一个提示框框

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试


当然我并没有把样式优化好,以后有空再改一下吧
有用记得留言分享


本文由 BigCoke 所撰,未注明内容均为原创,
并采用 CC BY 4.0 进行授权许可,转载请注明源地址
原文地址:https://cokewithice.com/p/150.html

Last modification:February 23rd, 2019 at 06:54 pm

Leave a Comment

8 comments

  1. 蝉時雨

    code 滚动条有问题啊~ 无法滚动到底部~

    1. BigCoke
      @蝉時雨

      好像是,不过点击左上角圆圈放大后就可以看到完整的了,我去和这个插件作者反馈下

  2. 小葵

    ୧(๑•̀⌄•́๑)૭

    1. BigCoke
  3. Link

    日常高产,我除了咕还是咕233

    1. BigCoke
      @Link

      因为要开学了,所以更的比较多,开学之后就会失踪咕咕咕了

  4. 七越

    这是大佬这是大佬

    1. BigCoke
      @七越

      惊现一位巨佬