Member 10310320 Ответов: 1

Как открыть модальное всплывающее окно с помощью jquery?


У меня есть div, я хочу открыть его как всплывающее окно с помощью Jquery, но он не работает.
Я пытаюсь это сделать на каком-то примере.Я следовал шагам в соответствии с шагами в видео примера.Ниже приведен полный код.

Что я уже пробовал:

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="padding-top:20px">
    <div class="col-md-10 col-md-offset-1">
        <div class="well">
            <table class="table table-bordered">
                <thead>
                    <tr class="success">
                        <td colspan="2">
                            New User Registration
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            Email
                        </td>
                        <td>
                            <input type="text" id="textEmail" placeholder="Enter Email" />
                        </td>

                    </tr>
                    <tr>
                        <td>
                            Password
                        </td>
                        <td>
                            <input type="text" id="textpassword" placeholder="Enter Password" />
                        </td>

                    </tr>
                    <tr>
                        <td>
                            Coinfirm Password
                        </td>
                        <td>
                            <input type="text" id="textCoinfirmPassword" placeholder="Enter  Coinfirm Password" />
                        </td>

                    </tr>
                    <tr class="success">
                        <td>
                            <input type="button" id="btnRegister" class="btn btn-success" value="Register" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="modal fade" tabindex="-1" id="successModal" data-keyboard="false" data-backdrop="static">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dissmiss="modal">
                                ×
                            </button>
                            <h4>success</h4>
                        </div>
                        <div class="modal-body">
                            <h2>Registration Successful</h2>
                        </div>
                        <div class="modal-footer">
                            <button type="button" data-dissmiss="modal" class="btn btn-success">
                                Close
                            </button>
                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>
    <script src="Scripts/bootstrap.min.js"></script>

    <script src="Scripts/jquery-1.10.2.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnRegister").click(function () {
               // alert('hiiiii');
                $("#successModal").modal('show');
            });
        });

    </script>
</body>
</html>

Karthik_Mahalingam

ссылка на файл jquery добавлена дважды

Member 10310320

Пожалуйста, проверьте обновленный код, который я тоже пробовал.

1 Ответов

Рейтинг:
1

Kornfeld Eliyahu Peter

"модальная" функция - это расширение jQuery, добавленное Bootstrap, но вы не включили Bootstrap JavaScript...


Member 10310320

Я пробовал использовать Bootstrap JavaScript, но он не работает.

Richard Deeming

Ваше последнее обновление не включает файл Bootstrap Javascript.

Обновите свой вопрос, чтобы показать версию, которая делает включить это.

Member 10310320

Плз смотрите сейчас

Richard Deeming

Вам нужно включить jQuery до файл Bootstrap Javascript.

Если вы проверите консоль разработчика браузера, вы увидите ошибку, сообщающую вам, что вы неправильно их поняли.

Member 10310320

Спасибо, что он работает так, как ожидалось.