jQuery UI 模态对话框在 JSP 上立即关闭答案

【问题标题】：jQuery UI Modal Dialog Closes Immediately on JSPjQuery UI 模态对话框在 JSP 上立即关闭
【发布时间】：2015-04-09 15:13:36
【问题描述】：

我们正在从 JSP 打开一个简单的 jQuery UI 对话框。

我们看到它一瞬间，它立即关闭。对话框需要保持打开状态。

JSP 代码：

<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

  <script type="text/javascript">

    function openPopUp() {
        alert('OpenPopUp() called');
          $("#dialog-1").dialog(
                    {
                        width: 600,
                        height: 400,
                        open: function(event, ui)
                        {
                            var textarea = $('<textarea style="height: 276px;">');
                            $(textarea).redactor({
                                focus: true,
                                maxHeight: 300,
                            });
                        }
                     });
    }

</script>

在 JSP 下方，Div 和打开弹出窗口的按钮：

<html:html>

    <div id="dialog-1" title="Dialog Title goes here..." style="display: none;">This my first jQuery UI Dialog!</div>

    ...

    <button id="disregard_1" onclick="openPopUp();">Open Dialog</button>

</html:html>

【问题讨论】：

标签： javascript jquery jsp jquery-ui

【解决方案1】：

您的初始化应该是单独的 imo。查看 jQuery UI 上的 API/examples 以及更详细的模态表单。

// init
var dialog = $('#selector').dialog({/*your options*/});

// bind event
$('#event-trigger').click(function(){
    dialog.dialog('open');
});

总结一下你的情况：

// dom ready
$(function(){
    var myPopup = $('#dialog-1');

    // custom function
    function openPopUp() {
        alert('OpenPopUp() called');
        myPopup.dialog('open'); 
    }

    // init
    myPopup.dialog({
        autoOpen: false, // prevent it from opening by default
        width: 600,
        height: 400,
        open: function(event, ui){
            var textarea = $('<textarea style="height: 276px;">');

            $(textarea).redactor({
                focus: true,
                maxHeight: 300,
            });
        }
    });
});

我希望你能看到初始化 onClick 和调用已经初始化的东西之间的区别。

【讨论】：