Открыть Bootstrap Modal с кода

Кто-нибудь знает, как открыть твитер bootstrap modal, из кода позади?

Я хочу открыть модальную версию на основе некоторого запроса в момент сохранения. Что-то вроде "Эй, нет запаса, возьмите одну из следующих опций, чтобы продолжить (сбросить, зарезервировать...) и нажать эту кнопку (что может сделать обратную передачу для продолжения)"

Я использую веб-формы ASP.NET.

Ответы

Ответ 1

Наконец, я обнаружил проблему, которая мешала мне показывать модальный код. Нужно думать, что было так же легко, как зарегистрировать клиентский текст, который сделал открытие, например:

ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"none",
    "<script>$('#mymodal').modal('show');</script>", false);

Но это никогда не работало для меня.

Проблема в том, что сценарии Twitter Bootstrap Modals вообще не работают, когда модаль находится внутри asp: Updatepanel, period. Поведение модалов терпит неудачу с каждой стороны, кодовое слово для клиента и клиента для кодирования (обратной передачи). Это даже предотвращает обратные вызовы, когда какие-либо js модальности выполнили, например, кнопку закрытия, что вам также нужно сделать несколько объектов для удаления объектов (для грязного примера)

Я уведомил персонал бутстрапа, но они ответили удобным "пожалуйста, дайте нам сценарий сбоев только с простым html, а не asp". В моем городе это называется... ну, Bootstrap не поддерживает ничего более простого html. Nevermind, используя его на asp.

Я думал, что они, по крайней мере, смотрят, что они делают по-другому на фоне управления, которые я нашел, вызывает основную часть проблем, но... (justa намекнул там)

Итак, у кого есть проблема, отпустите панель обновления для попытки.

Ответ 2

По умолчанию файлы javascript Bootstrap включены непосредственно перед тегом закрывающего тега

        <script src="vendors/jquery-1.9.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
        <script src="assets/scripts.js"></script>
 </body>

Я взял эти файлы javascript в раздел главы прямо перед тегом body, и я написал небольшую функцию для вызова модального всплывающего окна:

    <script src="vendors/jquery-1.9.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
    <script src="assets/scripts.js"></script>

 <script type="text/javascript">
    function openModal() {
        $('#myModal').modal('show');
    }
</script>
</head>
<body>

то я мог бы вызвать модальное всплывающее окно с кодом ниже:

protected void lbEdit_Click(object sender, EventArgs e) {   
      ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
}

Ответ 3

Возможно, этот ответ так поздно, но это полезно.
для этого у нас есть 3 шага:
1- Создание модальной структуры в HTML.
2- Создайте кнопку для вызова функции в java script, чтобы открыть модальный и установить display:none в CSS.
3- Вызовите эту кнопку по функции в коде позади.
вы можете увидеть эти шаги в следующем фрагменте:

HTML-мода:

<div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">
                                Registration done Successfully</h4>
                        </div>
                        <div class="modal-body">
                            <asp:Label ID="lblMessage" runat="server" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Close</button>
                            <button type="button" class="btn btn-primary">
                                Save changes</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->

Скрытая кнопка:

<button type="button" style="display: none;" id="btnShowPopup" class="btn btn-primary btn-lg"
                data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>

Script Код:

<script type="text/javascript">
        function ShowPopup() {
            $("#btnShowPopup").click();
        }
    </script>

код позади:

protected void Page_Load(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
    this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}

это решение является одним из решений, которые я использовал.

Ответ 4

Как это сделать:

1) показать всплывающее окно с формой

2) отправить форму с помощью AJAX

3) на стороне сервера AJAX, отрисуйте ответ, который будет либо:

  • показать всплывающее окно с формой с проверкой или просто сообщением
  • закрыть всплывающее окно (и, возможно, перенаправить вас на новую страницу)

Ответ 5

FYI,

Я видел это странное поведение раньше в виджетах jQuery. Часть ключа состоит в том, чтобы поместить обновленную панель внутри модальной. Это позволяет DOM обновленной панели "оставаться с" модальным (однако он работает с бутстрапом).

Ответ 6

Этот способ открытия Modal не отобразил Модаль для меня. Я нашел это как произведение arround.

Я удалил:

 ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);

Чем я добавил asp: метку с именем lblJavaScript и код за вызовом:

lblJavaScript.Text = "<script language=\"JavaScript\">openModal()</script>";

Теперь отображается модальный режим.