Javascript 弹出模式不起作用_Javascript_Jquery_Html_Css

Javascript 弹出模式不起作用

javascript jquery html css

Javascript 弹出模式不起作用,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个不起作用的弹出窗口。当我点击按钮时，屏幕变暗，就像一个弹出窗口即将出现，但没有弹出窗口出现。请帮忙这是html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href='https://fonts.googleapis.com/css?family=Var

我有一个不起作用的弹出窗口。当我点击按钮时，屏幕变暗，就像一个弹出窗口即将出现，但没有弹出窗口出现。请帮忙

这是html文件

      <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
          <link rel="stylesheet" type="text/css" href="css/main.css">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        </head>
        <body>
   <!-- the button to call pop up -->
          <a href="#" class='btn open-modal' data-modal="#modal1">Open Modal</a>

     <!-- pop up beginning -->
        <div class='modal' id='modal1'>
          <div class='content'>
            <h1 class='title'>This is a modal</h1>
            <p>
                Here is some text and stuff. cool cool  
            </p>
            <a class='btn close-modal' data-modal="#modal1" href="#">K Bye</a>
          </div>    
        </div>  
   <-- pop up ending -->

   <!-- the jquery script -->
        <script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <script type="text/javascript" src="script.js"></script>
        </body>
        </html>

javascript文件

        $(".modal").each( function(){
            $(this).wrap('<div class="overlay"></div>')
        });

        $(".open-modal").on('click', function(e){
            e.preventDefault();
            e.stopImmediatePropagation;

            var $this = $(this),
                    modal = $($this).data("modal");

            $(modal).parents(".overlay").addClass("open");
            setTimeout( function(){
                $(modal).addClass("open");
            }, 350);

            $(document).on('click', function(e){
                var target = $(e.target);

                if ($(target).hasClass("overlay")){
                    $(target).find(".modal").each( function(){
                        $(this).removeClass("open");
                    });
                    setTimeout( function(){
                        $(target).removeClass("open");
                    }, 350);
                }

            });

        });

        $(".close-modal").on('click', function(e){
            e.preventDefault();
            e.stopImmediatePropagation;

            var $this = $(this),
                    modal = $($this).data("modal");

            $(modal).removeClass("open");
            setTimeout( function(){ 
                $(modal).parents(".overlay").removeClass("open");
            }, 350);

        });

$（“.modal”）。每个（函数（）{
$（此）.wrap（“”）
});
$（“.open model”）。在（'click'，函数（e）{
e、 预防默认值（）；
e、 停止即时传播；
变量$this=$（this），
模态=$（$this）.data（“模态”）；
$（模态）.parents（“.overlay”）.addClass（“open”）；
setTimeout（函数（）{
$（模态）.addClass（“打开”）；
}, 350);
$（文档）。在（'单击'）上，函数（e）{
var目标=$（e.target）；
if（$（目标）.hasClass（“覆盖”））{
$（目标）.find（“.modal”）.each（函数（）{
$（此）.removeClass（“打开”）；
});
setTimeout（函数（）{
$（目标）.removeClass（“打开”）；
}, 350);
}
});
});
$（“.close model”）。在（'click'，函数（e）上{
e、 预防默认值（）；
e、 停止即时传播；
变量$this=$（this），
模态=$（$this）.data（“模态”）；
$（模态）.removeClass（“打开”）；
setTimeout（函数（）{
$（模态）.parents（“.overlay”）.removeClass（“open”）；
}, 350);
});

您必须将

显示：block

应用于

.overlay.modal.open

这是因为，即使将

.open

类附加到

.modal

之后，

.modal

中的

显示：无

。modal也需要被

显示：块

覆盖，以使特定的

.modal

可见

.overlay .modal.open {
  opacity: 1;
  pointer-events: inherit;
  display: block;
  width: 60%;
  height: 60%;
  margin: auto;
}

参考代码：

$（“.modal”）。每个（函数（）{
$（此）.wrap（“”）
});
$（“.open model”）。在（'click'，函数（e）{
e、 预防默认值（）；
e、 停止即时传播；
变量$this=$（this），
模态=$（$this）.data（“模态”）；
$（模态）.parents（“.overlay”）.addClass（“open”）；
setTimeout（函数（）{
$（模态）.addClass（“打开”）；
}, 350);
$（文档）。在（'单击'）上，函数（e）{
var目标=$（e.target）；
if（$（目标）.hasClass（“覆盖”））{
$（目标）.find（“.modal”）.each（函数（）{
$（此）.removeClass（“打开”）；
});
setTimeout（函数（）{
$（目标）.removeClass（“打开”）；
}, 350);
}
});
});
$（“.close model”）。在（'click'，函数（e）上{
e、 预防默认值（）；
e、 停止即时传播；
变量$this=$（this），
模态=$（$this）.data（“模态”）；
$（模态）.removeClass（“打开”）；
setTimeout（函数（）{
$（模态）.parents（“.overlay”）.removeClass（“open”）；
}, 350);
});
*{
框大小：边框框；
}
身体{
字体系列：“Nunito”，无衬线；
最小高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.btn{
填充：20px 50px；
显示：内联块；
背景：#EF233C；
颜色：白色；
文字装饰：无；
过渡：0.35s缓进缓出；
字号：700；
}
.btn:悬停{
背景：#dc1029；
}
.覆盖{
宽度：100%；
最小高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
填充：40px；
位置：固定；
排名：0；
左：0；
背景：rgba（0,0,0,0.75）；
不透明度：0；
指针事件：无；
过渡：0.35s缓进缓出；
最大高度：100vh；
溢出y：自动；
}
.打开{
不透明度：1；
指针事件：继承；
}
.叠加.模态{
背景：白色；
文本对齐：居中；
填充：40px 80px；
盒影：0px 1px 10px rgba（255,255,255,0.35）；
不透明度：0；
指针事件：无；
过渡：0.35s缓进缓出；
最大高度：100vh；
溢出y：自动；
}
.overlay.modal.open{
不透明度：1；
指针事件：继承；
显示：块；
宽度：60%；
身高：60%；
保证金：自动；
}
.overlay.modal.open.content{
转换：转换（0，0px）；
不透明度：1；
}
.overlay.modal.content{
转换：转换（0，-10px）；
不透明度：0；
过渡：0.35s缓进缓出；
}
.overlay.modal.title{
边际上限：0；
}

这是一个模态分析

这里有一些文字和资料。凉快

但是仍然有一个问题，它弹出了，但它是全屏的。它应该在中间弹出，周围区域变暗。按目前的方式，我将无法关闭它。您必须固定模式的宽度
和高度
，并设置边距：自动，将其置于中心。检查已编辑的代码。
.overlay .modal.open {
  opacity: 1;
  pointer-events: inherit;
  display: block;
  width: 60%;
  height: 60%;
  margin: auto;
}