我想在点击选择列表后显示我的模式框，但现在该怎么做，谁能帮我:(
正如你看到我的照片，点击“请选择大学”后我想显示我的“模态框”...我不想要模型框的源代码...我已经编码了..请检查我的来源，但问题是如何在点击“选择列表”后显示它？？？？？
请帮忙怎么做？
这是我的源代码:
<html>
<head>
<title>
Select your college from the list.
</title>
<style>
#img{
width: 104%;
z-index: 1;
height: 355px;
overflow: hidden;
padding: 0px;
margin-top: -9px;
margin-left: -8px;
margin-right: -2px;
}
.font{
font-family: "Segoe UI Light";
float: left;
}
*{
margin: 5;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
select::-ms-expand{
display: none;
}
body{
background: #444;
}
select{
width: 50%;
color: #A0A0A0 ;
font-size: 1em;
line-height: 1.2em;
margin: 0 0 10px;
padding: 6px 0;
border: 0 none;
cursor: pointer;
text-indent: 0.01px;
text-overflow: "";
back-image: none;
-webkit-appearance: none;
border: 1px solid #DDDDDD;
-moz-appearance: none;
-ms-appearance: none;
apperance: none;
}
select option{
background: #444;
}
a:link{
display: block;
color: #663333;
background-color: #B80000 ;
width: 120px;
text-align: center;
height: 45px;
padding: 10px;
text-decoration: none;
cursor: default;
}
a:hover{
background-color: #D80000;
}
.float{
float: right;
font-family: "Segoe UI Light";
}
.modalDialog{
position: fixed;
font-family: "Segoe UI Light";
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;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
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; }
</style>
<body>
<img id="img" src="images/party_girls.jpg" alt="Select_your_college" />
<h1 class="font"><font color="white">Welcome</font></h1>
<br><br><br><br>
<br><br>
<select>
<option selected="selected">Please select your college</option>
<option>Maharishi Arvind International Institute of technology, kota-rajasthan</option>
</select>
<a href="#openModal"></a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="close" class="close">X</a>
<h2>We are sorry..</h2>
<p>At this moment, only one college can be selected we are working on others college, if your college is listed then you could join this.</p>
</div>
</div>
<br><br><br><br><br><br>
<a href="" class="float">Next</a>
</body>
</head>
</html>
最佳答案
放在</body>之前
<script>
$("option:contains('Please select your college')").click(function(){
$("a[href='#openModal']")[0].click();
});
</script>
如果你想在点击下拉菜单后立即打开模式，而不是它的选项，使用:
<script>
$("select").click(function(){
$("a[href='#openModal']")[0].click();
});
</script>
关于javascript - 我想在点击选择大学后显示我的模态框，怎么办？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22166098/