Javascript JQuery如何在单击按钮时启动modalbox（对话框）_Javascript_Jquery_Jquery Ui_Modal Dialog_Jquery Ui Dialog

Javascript JQuery如何在单击按钮时启动modalbox（对话框）

javascript jquery jquery-ui

Javascript JQuery如何在单击按钮时启动modalbox（对话框）,javascript,jquery,jquery-ui,modal-dialog,jquery-ui-dialog,Javascript,Jquery,Jquery Ui,Modal Dialog,Jquery Ui Dialog,我在一些帮助下编写了一个拖放程序一切正常，我只需要帮助实现一个对话框（使用jQueryUI1.10.3），在单击按钮“生成报告”时打开，而不是默认的窗口弹出框有人能帮忙吗这是 HTML <body>  <div id="container">

我在一些帮助下编写了一个拖放程序

一切正常，我只需要帮助实现一个对话框（使用jQueryUI1.10.3），在单击按钮“生成报告”时打开，而不是默认的窗口弹出框

有人能帮忙吗

这是

HTML

<body>

    <!-- Add your site or application content here -->
    <div id="container">

        <!--header and nav will go here-->

        <section>
            <!--drag from div-->
            <div class="col1">
                <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
                  <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">Total Sales</h5>
                      <img src="http://hasankhan.co.uk/ao/img/totalsales.png" alt="Total Sales" width="96" height="72" />
                    <a href="link/to/transfer/script/when/we/have/js/off" title="Transfer Across" class="ui-icon ui-icon-transferthick-e-w">Transfer Across</a>
                  </li>
                  <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">Availability</h5>
                    <img src="http://hasankhan.co.uk/ao/img/availability.png" alt="Availability" width="96" height="72" />
                    <a href="link/to/transfer/script/when/we/have/js/off" title="Transfer Across" class="ui-icon ui-icon-transferthick-e-w">Transfer Across</a>
                  </li>
                  <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">Completed</h5>
                    <img src="http://hasankhan.co.uk/ao/img/completed.png" alt="Completed Sales" width="96" height="72" />
                    <a href="link/to/transfer/script/when/we/have/js/off" title="Transfer Across" class="ui-icon ui-icon-transferthick-e-w">Transfer Across</a>
                  </li>
                  <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">Pending</h5>
                    <img src="http://hasankhan.co.uk/ao/img/pending.png" alt="Pending Sales" width="96" height="72" />
                    <a href="link/to/transfer/script/when/we/have/js/off" title="Transfer Across" class="ui-icon ui-icon-transferthick-e-w">Transfer Across</a>
                  </li>  
                </ul>
            </div><!--col1-->

            <!--drag into div-->
            <div class="col2">
                <div id="transfer">
                  <h4 class="ui-widget-header"><span>Drop icons here</span></h4>
                </div><!--transfer-->
            </div><!--col2-->
        </section><!--section-->

        <section>
            <div class="col3">
                <button class="generate">Generate Report</button>
                <button class="reset">Reset</button>    
            </div><!--col3-->
        </section>
    </div><!--container-->
</body>

JSFIDLE非常有用！我为模式框添加了一些HTML，添加了CSS来隐藏它，添加了javascript来初始化它并将其链接到已经为其设置的点击处理程序。这些补充的一部分

HTML:

添加到按钮的行。生成单击处理程序：

$gen_dialog.find('.diag-content').html(content.join(', ')).end().dialog('open');

你是明星约书亚，非常感谢你无价的投入

 #container{width:100%; margin:0 auto; background-color:#999; position:relative; 
 clear:both;}
 header{background:url(../img/header-bg.jpg) no-repeat #fff; height:100%;}
 #logo{position:relative; float:left; width:126px; height:107px;}
 #slogan{float:right;}
 #slogan-image{float:right;}
 nav{height:30px; background-color:#a4abb1; clear:both; width:100%; margin:0 auto; 
 overflow:hidden;}
 nav ul{width:800px; margin:0 auto;}
 nav ul li{list-style-type:none; float:left; padding:8px 20px; color:#FFF; font-
 size:14px; font-weight:lighter; border-left:#FFF solid 1px;}
 nav ul li.last{border-right:1px solid #FFF;}
 nav ul li:hover{background-color:#333; cursor:pointer;}
 nav a{color:#FFF; text-decoration:none;}

 section .col1{width: 55%; float:left; background:#dcdcdc; border-radius:5px; margin-
 top:40px; min-height:250px;}
 section .col2{width: 40%; float:right; background:#dcdcdc; border-radius:5px; margin-
 top:40px; padding:1%;}

 section .col3{width: 55%; float:right; margin-top:10px; clear:both;}

 .gallery.custom-state-active { background: #eee;}
 .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0.4em 0.4em; 
  text-align: center; }
 .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
 .gallery li a { float: right; }
 .gallery li a.ui-icon-zoomin { float: left; }
 .gallery li img { width: 100%; cursor: move; }

 #transfer { float: right; width: 100%; min-height: 250px; }
 #transfer h4 { line-height: 16px; margin: 0 0 0.4em; }
 #transfer h4 .ui-icon { float: left; }
 #transfer .gallery h5 { display: none; }

 button{display:block; margin-top:20px; width:200px;}

<div id="gen_dialog">
    <p class="diag-content"></p>
</div>

// set up the generate button's dialog box
$gen_dialog.dialog({
    autoOpen:false,
    height:140,
    'title': 'Generated Report',
    modal:true
});

$gen_dialog.find('.diag-content').html(content.join(', ')).end().dialog('open');