Q:

I want to display my modal box after click into selecting college, how to do this?

i want to display my modal box after clicking into selecting list but at this moment how to do it, can anyone help me please :(
As you can see my pic, after clicking on "please select college" i want to show my "modal box"... i don't want source code for model box...i already coded ..pls check my source but problem is how to show it after clicking "selecting list"?????

please help how to do it?
here is my source code:
<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>

A:

put it before </body>
<script>
$("option:contains('Please select your college')").click(function(){
$("a[href='#openModal']")[0].click();
});
</script>

if you want to open modal immediately after clicking dropdown, not its options, use :
<script>
    $("select").click(function(){
    $("a[href='#openModal']")[0].click();
    });
</script>

