Javascript 我想在点击进入选择学院后显示我的模式框,怎么做?
我想在点击进入选择列表后显示我的模式框,但此时如何操作,请任何人帮助我: 正如你可以看到我的图片,点击后请选择学院我想显示我的模态框。。。我不想要模型框的源代码…我已经编码了…请检查我的源代码,但问题是单击“选择列表”后如何显示它 请帮忙怎么做 以下是我的源代码:Javascript 我想在点击进入选择学院后显示我的模式框,怎么做?,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我想在点击进入选择列表后显示我的模式框,但此时如何操作,请任何人帮助我: 正如你可以看到我的图片,点击后请选择学院我想显示我的模态框。。。我不想要模型框的源代码…我已经编码了…请检查我的源代码,但问题是单击“选择列表”后如何显示它 请帮忙怎么做 以下是我的源代码: <html> <head> <title> Select your college from the list. </title> <sty
<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>
放在前面
如果要在单击下拉菜单后立即打开模态,而不是其选项,请使用:
<script>
$("select").click(function(){
$("a[href='#openModal']")[0].click();
});
</script>
您缺少报价$a[href='OpenModel'][0]。请单击;谢谢你,Tilwin,但是它在没有引号的情况下对我来说也很好。如果我是你,我会放弃使用空格,而改用CSS边距。同样的道理,你可以使用CSS来实现。通过这种方式,您可以分离内容和样式,从而使您的页面更轻、呈现效果更好、更易于阅读屏幕阅读器、机器人等。好的……我会尝试一下,谢谢:
<script>
$("select").click(function(){
$("a[href='#openModal']")[0].click();
});
</script>