javascript - jQuery UI 模态对话框在 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

在我看来，你的初始化应该是单独的。检查API/examples关于 jQuery UI 以及更详细的模态表单。

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