发送查询具体价目表

Question

我正在建立网站，其中将包括 table 和价目表。现在我想创建一个代码，它将打开一个新的弹出窗口 window 以便用户可以发送有关特定价格的查询。

我创建了一个包含计划的下拉列表和一个弹出按钮。当用户选择特定计划并单击弹出窗口时，应打开一个新的弹出窗口。

代码似乎无法正常工作，也没有出现弹出窗口。

知道为什么吗？

谢谢

HTML

Select 你的域名

<select id="mounth">
    <option value="hide">-- Domain name --</option>
    <option value="january" rel="icon-temperature">domain1</option>
    <option value="february">domain1</option>
    <option value="march">domain1</option>
    <option value="april">domain1</option>
    <option value="may">domain1</option>
    <option value="june">domain1</option>
</select>
<!--END DOMAIN NAME-->

HTML 弹出式表单

<!--POPUP FORM-->
<!-- Contact Us Form -->
<div id="abc">
    <!-- Popup Div Starts Here -->
    <div id="popupContact">
        <!-- Contact Us Form -->
        <form action="#" id="form" method="post" name="form">
            <img id="close" src="images/3.png" onclick ="div_hide()">
            <h2>Contact Us</h2>
            <hr>
            <input id="name" name="name" placeholder="Name" type="text">
            <input id="email" name="email" placeholder="Email" type="text">
            <textarea id="msg" name="message" placeholder="Message"></textarea>
            <a href="javascript:%20check_empty()" id="submit">Send</a>
        </form>
    </div>
    <!-- Popup Div Ends Here -->
</div>
<!-- Display Popup Button -->
<h1>Click Button To Popup Form Using Javascript</h1>
<button id="popup" onclick="div_show()">Popup</button>
<!--END POPUP FORM-->

CSS

#abc {
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto
}
img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}
div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
font-family:'Raleway',sans-serif
}
form {
max-width:300px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
background-color:#fff
}
p {
margin-top:30px
}
h2 {
background-color:#FEFFED;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc
}
input[type=text] {
width:82%;
padding:10px;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway
}
#name {
background-image:url(../images/name.jpg);
background-repeat:no-repeat;
background-position:5px 7px
}
#email {
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:5px 7px
}
textarea {
background-image:url(../images/msg.png);
background-repeat:no-repeat;
background-position:5px 7px;
width:82%;
height:95px;
padding:10px;
resize:none;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway;
margin-bottom:30px
}
#submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:#FFBC00;
color:#fff;
border:1px solid #FFCB00;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px
}
span {
color:red;
font-weight:700
}
button {
width:10%;
height:45px;
border-radius:3px;
background-color:#cd853f;
color:#fff;
font-family:'Raleway',sans-serif;
font-size:18px;
cursor:pointer
}

JS

function check_empty() {

if (document.getElementById('name').value == "" ||             

document.getElementById('email').value == "" ||       

document.getElementById('msg').value == "") {
    alert("Fill All Fields !");
} else {
    document.getElementById('form').submit();
    alert("Form Submitted Successfully...");
}
}
//Function To Display Popup
function div_show() {
document.getElementById('#abc').style.display = "block";
}
//Function to Hide Popup
function div_hide(){
document.getElementById('#abc').style.display = "none";
}

JSFIDDLE

https://jsfiddle.net/3ndew7oh/

Answer 1

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
#abc {
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto
}
img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}
div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
font-family:'Raleway',sans-serif
}

p {
margin-top:30px
}
h2 {
background-color:#FEFFED;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc
}
input[type=text] {
width:82%;
padding:10px;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway
}
#name {
background-image:url(../images/name.jpg);
background-repeat:no-repeat;
background-position:5px 7px
}
#email {
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:5px 7px
}
textarea {
background-image:url(../images/msg.png);
background-repeat:no-repeat;
background-position:5px 7px;
width:82%;
height:95px;
padding:10px;
resize:none;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway;
margin-bottom:30px
}
#submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:#FFBC00;
color:#fff;
border:1px solid #FFCB00;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px
}
span {
color:red;
font-weight:700
}
button {
width:10%;
height:45px;
border-radius:3px;
background-color:#cd853f;
color:#fff;
font-family:'Raleway',sans-serif;
font-size:18px;
cursor:pointer
}
</style>

<select id="mounth">
    <option value="hide">-- Domain name --</option>
    <option value="january" rel="icon-temperature">domain1</option>
    <option value="february">domain1</option>
    <option value="march">domain1</option>
    <option value="april">domain1</option>
    <option value="may">domain1</option>
    <option value="june">domain1</option>
</select>

<h1>Click Button To Popup Form Using Javascript</h1>
<button id="popup" class="popup">Popup</button>

 
<!--START POPUP FORM--> 
<div class="modal fade" id="popup-moda">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Contact Us</h4>
      </div>
   <form action="#" method="post" name="form">
    <div class="modal-body">
    <div id="domain"></div>
    <input required id="name" name="name" placeholder="Name" type="text">
    <input required id="email" name="email" placeholder="Email" type="text">
    <textarea id="msg" name="message" placeholder="Message"></textarea>
    </div>
    <div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   <button type="submit" class="btn btn-primary">Send</button>
    </div>
   </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--END POPUP FORM-->


<script>
$(document).ready(function(){
 
 $('.popup').click(function(e){
  e.preventDefault();
  $('#domain').html('<b>' + $('#mounth').val() + '</b>');
  $('#popup-moda').modal('show');
  return false;
 });
});

</script>

发送查询具体价目表

Send inquiry on specific price list

jquery

html

css

contacts

Select 你的域名