如何在页面加载/使用Javascript时自动打开仅CSS的弹出窗口？

我已经创建了CSS唯一的弹出窗口，它只能通过点击链接/按钮来工作。我想在页面加载时自动显示此弹出窗口。另外，如何在不点击链接/按钮的情况下打开此弹出窗口，即使用Javascript/jQuery

.modalDialog{
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
z指数：99999；
不透明度：0；
-webkit过渡：不透明度400ms缓进；
-moz过渡：不透明度400ms缓进；
过渡：不透明度400ms缓进；
指针事件：无；
}
.modalDialog：目标{
不透明度：1；
指针事件：自动；
}
.modalDialog>div{
宽度：400px；
位置：相对位置；
利润率：10%自动；
填充：5px20px 13px 20px；
边界半径：10px；
背景：#fff；
背景:#339999；
}
.结束{
背景:#606061；
颜色：#FFFFFF；
线高：25px；
位置：绝对位置；
右：-12px；
文本对齐：居中；
顶部：-10px；
宽度：24px；
文字装饰：无；
字体大小：粗体；
-webkit边界半径：12px；
-moz边界半径：12px；
边界半径：12px；
-莫兹盒阴影：1px 1px 3px#000；
-网络工具包盒阴影：1px 1px 3px#000；
盒影：1px 1px 3px#000；
}
.关闭：悬停{
背景：#00d9ff；
}

这是一个示例模式框，可以使用CSS3的强大功能创建

不需要jQuery，您可以使用普通Javascript实现这一点。 要在页面加载时自动打开弹出窗口，请将哈希设置为弹出窗口的

id

演示

函数openPopup（）{ window.location.hash='openmodel'； } window.onload=openPopup

.modalDialog{
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
z指数：99999；
不透明度：0；
-webkit过渡：不透明度400ms缓进；
-moz过渡：不透明度400ms缓进；
过渡：不透明度400ms缓进；
指针事件：无；
}
.modalDialog：目标{
不透明度：1；
指针事件：自动；
}
.modalDialog>div{
宽度：400px；
位置：相对位置；
利润率：10%自动；
填充：5px20px 13px 20px；
边界半径：10px；
背景：#fff；
背景:#339999；
}
.结束{
背景:#606061；
颜色：#FFFFFF；
线高：25px；
位置：绝对位置；
右：-12px；
文本对齐：居中；
顶部：-10px；
宽度：24px；
文字装饰：无；
字体大小：粗体；
-webkit边界半径：12px；
-moz边界半径：12px；
边界半径：12px；
-莫兹盒阴影：1px 1px 3px#000；
-网络工具包盒阴影：1px 1px 3px#000；
盒影：1px 1px 3px#000；
}
.关闭：悬停{
背景：#00d9ff；
}

这是一个示例模式框，可以使用CSS3的强大功能创建




通过Javascript打开弹出窗口

只需在页面加载时触发点击链接即可

$（文档）.ready（函数（）{
console.log（$（'a[href=“#openModal”]”）和[0]）；
$（'a[href=“#OpenModel”]”）[0]。单击（）；
})

.modalDialog{
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
z指数：99999；
不透明度：0；
-webkit过渡：不透明度400ms缓进；
-moz过渡：不透明度400ms缓进；
过渡：不透明度400ms缓进；
指针事件：无；
}
.modalDialog：目标{
不透明度：1；
指针事件：自动；
}
.modalDialog>div{
宽度：400px；
位置：相对位置；
利润率：10%自动；
填充：5px20px 13px 20px；
边界半径：10px；
背景：#fff；
背景:#339999；
}
.结束{
背景:#606061；
颜色：#FFFFFF；
线高：25px；
位置：绝对位置；
右：-12px；
文本对齐：居中；
顶部：-10px；
宽度：24px；
文字装饰：无；
字体大小：粗体；
-webkit边界半径：12px；
-moz边界半径：12px；
边界半径：12px；
-莫兹盒阴影：1px 1px 3px#000；
-网络工具包盒阴影：1px 1px 3px#000；
盒影：1px 1px 3px#000；
}
.关闭：悬停{
背景：#00d9ff；
}

这是一个示例模式框，可以使用CSS3的强大功能创建

由于您只是使用css不透明度隐藏弹出窗口，您可以在页面加载时使用jquery来显示弹出窗口，或者如果您想添加一些动画，可以将其淡入淡出

另外，在css中将弹出窗口的显示设置为“无”可能是一个好主意，否则以后可能会遇到问题。你可以这样做：

.modalDialog {
  //added display none on element
  display:none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  //opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

$(document).ready(function() {
  //Use jQuery to show the popup
  $('.modalDialog').show();
  //Alternativly use jQuery to fadeIn the popup
  $('.modalDialog').fadeIn()
})

---

最后更新的代码：

告诉我们您尝试过什么（使用jQuery）您谈论过您的代码在单击时实际触发弹出窗口，我们可以看看您在jQuery中写了什么吗？弹出窗口本身没有加载为什么单击“关闭”时弹出窗口没有关闭