jQuery UI Modal对话框在JSP上立即关闭

Question

我们正在从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>

Answer 1

您的初始化应为单独的imo。 检查jQuery UI上的API / 示例 ，更详细地了解模态形式。

// 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和调用已初始化的内容之间的区别。