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

jQuery UI模式对话框立即关闭JSP

1 个答案: