将模态视图集成到按钮单击时显示的网站

Question

我创建了一个模态视图，当按下按钮#showModalView时，我希望它出现在屏幕中间，如果用户点击模态视图内的任何位置，则会隐藏它。这是模态视图的代码： modal view fiddle。

我在将此视图集成到当前网站时遇到了麻烦。这是我网站的支柱：

use forms.Form

知道我该怎么办？

Answer 1

假设你可以使用jQuery，你可以这样做......

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

$("#buy-wrapper").click(function(e){
	if ($(e.target).closest("#buy-box").length === 0)
		$("#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;
	  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>