整合模式的看法到網站顯示按鈕點擊

Question

我已經創建了我想如果用戶點擊任意位置時按下按鈕#showModalView和獲取隱藏出現在屏幕中間模態的視圖，但內部模式視圖。這是模態視圖的代碼： modal view fiddle。

我有麻煩集成這種觀點到當前的網站。這是我的網站的骨幹：

<div> 
    <div class="header">THIS IS HEADER</div> 
    <p>paragraph 1</p> 
    <p>paragraph 1</p> 
    <div class="button"> 
    <a id="showModalView" href="#">CLICK ME</a> 
    </div> 
    <br /> 
    <div class="FOOTER">THIS IS FOOTER</div> 

</div> 

任何想法我該怎麼做？

Answer 1

假設你可以使用jQuery你可以做到這一點...

$("#showModalView").click(function(){ 
 
\t $("#buy-wrapper").show(); 
 
}); 
 

 
$("#buy-wrapper").click(function(e){ 
 
\t if ($(e.target).closest("#buy-box").length === 0) 
 
\t \t $("#buy-wrapper").hide(); 
 
});

.buy-input-general { 
 
    outline: none; 
 
} 
 

 
#buy-wrapper { 
 
    display:none; 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    left:0; 
 
    background:rgba(200, 54, 54, 0.5); 
 
} 
 

 
#buy-box { 
 
    width: 345px; 
 
    height: 470px; 
 
    background-color: #fff; 
 
    margin: 0 auto; 
 
    -webkit-border-radius: 4px; 
 
    -o-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 3px; 
 
    border: thin solid #ededed; 
 
} 
 

 
#top_header { 
 
    width: 100%; 
 
    margin: 0; 
 
    padding-top: 45px; 
 
} 
 

 
#top_header > h3 { 
 
    text-align: center; 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: 32px; 
 
    font-weight: 800; 
 
    color: #282828; 
 
    -webkit-text-stroke: 0.5px; 
 
    margin: 0; 
 

 
} 
 

 
#top_header > h5 { 
 
    text-align: center; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 15px; 
 
    font-weight: 300; 
 
    color: #424242; 
 
    line-height: 1.6; 
 
    margin: 0; 
 
    padding: 15px 0; 
 
    color: #a6a6a6; 
 
    -webkit-text-stroke: 0.2px; 
 
} 
 

 
#buy-inputs { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.buy-input-submit, .buy-input-text { 
 
    width: 300px; 
 
    height: 55px; 
 
    position: relative; 
 
\t margin: 0 auto; 
 
    display: block; 
 
    margin-bottom: 10px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    -webkit-text-stroke: 0.1px; 
 
} 
 

 
.buy-input-text { 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 300; 
 
    border: thin solid #efefef; 
 
    color: #4f4f4f; 
 
} 
 

 
.buy-input-text:focus { 
 
    border: thin solid #ededed; 
 
    -webkit-transition: all .4s ease; 
 
    -moz-transition: all .4s ease; 
 
    -o-transition: all .4s ease; 
 
    transition: all .4s ease; 
 
} 
 

 
.buy-input-text:focus{ 
 
    border-left: thin solid #282828; 
 
} 
 

 

 
.buy-input-submit { 
 
    color: #282828; 
 
    background-color: #fff; 
 
    border: 1px solid #282828; 
 
    border-radius: 2px; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
    transition: all .2s ease; 
 
    margin-top: 15px; 
 
    cursor: pointer; 
 
    font-size:115%; 
 
} 
 

 
.buy-input-submit:hover { 
 
    background-color: #289928; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="header">THIS IS HEADER</div> 
 
    <p>paragraph 1</p> 
 
    <p>paragraph 1</p> 
 
    <div class="button"> 
 
    <a id="showModalView" href="#">CLICK ME</a> 
 
    </div> 
 
    <br /> 
 
    <div class="FOOTER">THIS IS FOOTER</div> 
 

 
</div> 
 

 
<div id="buy-wrapper"> 
 
    <div id="buy-box"> 
 
    <div id="top_header"> 
 
     <h3>Lallaa</h3> 
 
     <h5> 
 
     Enter details. <br /> 
 
      You know, because reasons and stuff. <br />Just do it. 
 
     </h5> 
 
    </div> 
 
    <di id="buy-inputs"> 
 
     <input class="buy-input-text buy-input-general" type="text" placeholder="First name"> 
 
     <input class="buy-input-text buy-input-general" type="text" placeholder="Last name"> 
 
     <input class="buy-input-text buy-input-general" type="text" placeholder="Email"> 
 
     <input class="buy-input-submit buy-input-general" type="submit" value="NEXT"> 
 
    </di> 
 
    <div id="bottom"> 
 
     
 
    </div> 
 
    </div> 
 
</div>