div中有2个单独的Modals

Question

我有两个“阅读更多”按钮和一个模态。如何为每个“阅读更多”制作单独的模态

.modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        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;
    }
    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    .modalDialog > div {
        width: 1000px; 
        max-width: 90%; 
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    .close:hover {
        background: #00d9ff;
    }


    h1 {
    color:green;
    padding-left:10px
    }

    #hover {
    color:rgba(188,175,204,0.9)
    }

    h2#testimonials {
    color:#fffae3
    }

        div#all {
        height: 90%;
    width: 100%;
    max-height: 900px;

        display: flex;
        overflow: overlay;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border-style: solid;
        border-width: 1px;
        background: #634c30
    }

    .view {
    float:left;
    border:5px solid #fff;
    overflow:hidden;
    position:relative;
    text-align:center;
    box-shadow:1px 1px 2px #e6e6e6;
    cursor:default;
    background:#fff url(../images/bgimg.jpg) no-repeat center center;
    margin:10px
    }

    .view .mask,.view .content {
    width:100%;
    height:100%;
    position:absolute;
    overflow:auto;
    top:0;
    left:1px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center
    }

    .view img {
    display:block;
    position:relative
    }

    .view h2 {
    text-transform:uppercase;
    color:white;
    text-align:center;
    position:relative;
    font-size:25px;
    font-family:Raleway, serif;
    margin:20px 0 0;
    padding:10px
    }

    .view p {
    font-family:Merriweather, serif;
    font-style:italic;
    font-size:14px;
    position:relative;
    color:black;
    text-align:center;
    padding:0
    }

    .view a.info{
      float:left;
       
        text-decoration: none;
        background: #000;
        color: white;
        font-family: Raleway, serif;
        text-transform: uppercase;
        box-shadow: 0 0 1px #000;
        padding: 2px 10px;
        margin: 4px;
    }

    .view a.info:hover {
    box-shadow:0 0 5px #000
    }



    .view-tenth img {
    width:650px;
    height:200px;
    transform:scaleY(1);
    transition:all 3s ease-in-out
    }

    .view-tenth .mask {
    background-color:rgba(255,231,179,0.3);
    transition:all .5s linear;
    opacity:0
    }

    .view-tenth h2 {
    border-bottom:1px solid rgba(0,0,0,0.3);
    background:transparent;
    transform:scale(0);
    color:green;
    transition:all 3.5s linear;
    opacity:0;
    margin:20px 40px 0
    }

    .view-tenth p {
    color:red;
    opacity:0;
    transform:scale(0);
    transition:all 2.5s linear
    }

    .view-tenth a.info {
    opacity:0;
    transform:scale(0);
    transition:all 4.5s linear
    }

    .view-tenth:hover img {
    -webkit-transform:scale(10);
    transform:scale(10);
    opacity:0
    }

    .view-tenth:hover .mask {
    opacity:1
    }

    .view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
    transform:scale(1);
    opacity:1
    }

 

   <div id="all">
<div class="view view-tenth">
<img src=" https://drive.google.com/uc?id=0B3ZYwq9eGZ49VWJOM0lCSkpXaDg" />
<div class="mask">
<h2>The Only Living Boy in New York</h2>
Words and such, a whole lot more of muh flippin' words.
<a class="info" href="#openModal">Read More</a>
<a class="info" href="#openModal2">Read More</a>

<div id="openModal" class="modalDialog">
    <div>   <a href="#close" title="Close" class="close">X</a>
            <h2>Modal Box</h2>
        <p>left.</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
<div id="openModal2" class="modalDialog">
    <div>   <a href="#close" title="Close" class="close">X</a>
            <h2>Modal Box</h2>
        <p>right</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p></div>
</div>
</div>

我试图为每个按钮做一个不同的模态工作。我有两个“阅读更多”按钮。如何点击该片段，如何为每个“阅读更多”单独创建一个单独的模态，只有左侧“阅读更多”正在运行。

Answer 1

使用bootstrap，虽然不是直接来自你的代码，但它是一个很好的参考，你应该如何构建你的div。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal 2</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<!-- Modal -->
<div id="myModal2" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header 2</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal 2.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>