Html 一个div中有2个单独的Modals

我有两个带有一个模式的“阅读更多”按钮。如何为每个“阅读更多”创建单独的模式

.modalDialog{
位置：固定；
字体系列：Arial、Helvetica、无衬线字体；
排名：0；
右：0；
底部：0；
左：0；
背景：rgba（0,0,0,0.8）；
z指数：99999；
不透明度：0；
-webkit过渡：不透明度400ms缓进；
-moz过渡：不透明度400ms缓进；
过渡：不透明度400ms缓进；
指针事件：无；
}
.modalDialog：目标{
不透明度：1；
指针事件：自动；
}
.modalDialog>div{
宽度：1000px；
最大宽度：90%；
位置：相对位置；
利润率：10%自动；
填充：5px20px 13px 20px；
边界半径：10px；
背景：#fff；
背景：-moz线性梯度（#fff，#999）；
背景：-webkit线性梯度（#fff，#999）；
背景：-o-线性梯度（#fff，#999）；
}
.结束{
背景:#606061；
颜色：#FFFFFF；
线高：25px；
位置：绝对位置；
右：-12px；
文本对齐：居中；
顶部：-10px；
宽度：24px；
文字装饰：无；
字体大小：粗体；
-webkit边界半径：12px；
-moz边界半径：12px；
边界半径：12px；
-莫兹盒阴影：1px 1px 3px#000；
-网络工具包盒阴影：1px 1px 3px#000；
盒影：1px 1px 3px#000；
}
.关闭：悬停{
背景：#00d9ff；
}
h1{
颜色：绿色；
左侧填充：10px
}
#盘旋{
颜色：rgba（188175204,0.9）
}
h2#推荐书{
颜色：#fffae3
}
全部{
身高：90%；
宽度：100%；
最大高度：900px；
显示器：flex；
溢出：覆盖；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
边框样式：实心；
边框宽度：1px；
背景：#634c30
}
.视图{
浮动：左；
边框：5px实心#fff；
溢出：隐藏；
位置：相对位置；
文本对齐：居中；
盒影：1px 1px 2px#e6；
游标：默认值；
背景：#fff url（../images/bgimg.jpg）无重复中心；
利润率：10px
}
.view.mask、.view.content{
宽度：100%；
身高：100%；
位置：绝对位置；
溢出：自动；
排名：0；
左：1px；
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中
}
.查看img{
显示：块；
职位：相对
}
.视图h2{
文本转换：大写；
颜色：白色；
文本对齐：居中；
位置：相对位置；
字体大小：25px；
字体系列：Raleway，衬线；
利润率：20px0；
填充：10px
}
.视图p{
字体系列：Merriweather，衬线；
字体：斜体；
字体大小：14px；
位置：相对位置；
颜色：黑色；
文本对齐：居中；
填充：0
}
.查看a.info{
浮动：左；
文字装饰：无；
背景：#000；
颜色：白色；
字体系列：Raleway，衬线；
文本转换：大写；
盒影：0 0 1px#000；
填充：2x10px；
保证金：4倍；
}
.查看a.信息：悬停{
盒影：0 0 5px#000
}
.查看第十个img{
宽度：650px；
高度：200px；
变换：scaleY（1）；
过渡：所有3个都很容易进出
}
.第十视图.遮罩{
背景色：rgba（255231179,0.3）；
过渡：全部.5s线性；
不透明度：0
}
.第十视图h2{
边框底部：1px实心rgba（0,0,0,0.3）；
背景：透明；
变换：比例（0）；
颜色：绿色；
过渡：所有3.5s线性；
不透明度：0；
利润率：20px 40px 0
}
.第10页{
颜色：红色；
不透明度：0；
变换：比例（0）；
过渡：所有2.5s线性
}
.查看第十个a.info{
不透明度：0；
变换：比例（0）；
过渡：所有4.5s线性
}
.视图10：悬停img{
-webkit转换：规模（10）；
变换：标度（10）；
不透明度：0
}
.视图10：悬停.遮罩{
不透明度：1
}
.第十视图：悬停h2、.第十视图：悬停p、.第十视图：悬停a.info{
变换：比例（1）；
不透明度：1
}

纽约唯一活着的男孩
语言等等，更多的语言。
模态盒
左

你可以在这里做很多事情，比如在网站加载时弹出广告，或者为用户创建登录/注册表单

模态盒
对

你可以在这里做很多事情，比如在网站加载时弹出广告，或者为用户创建登录/注册表单

使用bootstrap，虽然不是直接从代码开始的，但它是关于如何构造div的一个很好的参考

开放模态
开放式模式2
&时代；
模态头
模态中的一些文本

接近
&时代；
模式标题2
模态2中的一些文本

接近

使用bootstrap，虽然不是直接从代码开始的，但它是关于如何构造div的一个很好的参考

开放模态
开放式模式2
&时代；
模态头
模态中的一些文本

接近
&时代；
模式标题2
模态2中的一些文本

接近

我发现两个openModal div都有相同的ID，我会尝试为每个div提供不同的ID，并更新上面的read more HREF以使用不同的ID谢谢Dough测试，我将第二个div ID更改为我看到两个openModal div都有相同的ID，我会尝试提供