Я хочу отобразить мое модальное окно после выбора колледжа, как это сделать?

0

я хочу отобразить мой модальный ящик после нажатия на выбор списка, но на данный момент, как это сделать, может кто-нибудь мне помочь :(

Как вы можете видеть мою фотографию, после нажатия "выберите колледж", я хочу показать свой "модальный ящик"... я не хочу, чтобы исходный код для окна модели... я уже закодировал.pls проверить мой источник, но проблема заключается в том, как показать его после нажатия "Выбор списка"?????

Изображение 174551

пожалуйста, помогите, как это сделать?

вот мой исходный код:

<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>
  • 1
    Если бы я был тобой, я бы отказался от использования <br> для пробелов и использовал вместо этого CSS margin . То же самое касается <font> , вы можете использовать CSS для этого. Таким образом, вы будете разделять контент и стиль, что сделает ваши страницы более легкими, лучше прорисованными и удобными для чтения (программы чтения с экрана, боты и т. Д.)
  • 0
    ок ... попробую спасибо :)
Теги:

1 ответ

1
Лучший ответ

положите его перед </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>
Поделиться
  • 0
    Вам не хватает кавычек $("a[href='#openModal']")[0].click();
  • 0
    Где его поставить?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню