javascript - JQuery如何在按钮单击时触发模态框（对话框）

Question

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

一切正常，我只需要帮助来实现一个对话框（使用 JQuery UI 1.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>

jQuery

 $(function() {
        // there's the gallery and the transfer
        var $gallery = $( "#gallery" ),
          $transfer = $( "#transfer" );

        // let the gallery items be draggable
        $( "li", $gallery ).draggable({
          cancel: "a.ui-icon", // clicking an icon won't initiate dragging
          revert: "invalid", // when not dropped, the item will revert back to its initial position
          containment: "document",
          helper: "clone",
          cursor: "move"          
        });

        // let the transfer be droppable, accepting the gallery items
        $transfer.droppable({
          accept: "#gallery > li",
          activeClass: "ui-state-highlight",
          drop: function( event, ui ) {
            deleteImage( ui.draggable );
          }
        });

        // let the gallery be droppable as well, accepting items from the transfer
        $gallery.droppable({
          accept: "#transfer li",
          activeClass: "custom-state-active",
          drop: function( event, ui ) {
            recycleImage( ui.draggable );
          }
        });
// function for generating info of icon/s in drop box
$('button.generate').click(function() {
    var content = $('ul li h5', $transfer).map(function(i, v) {
        return $(this).text();
    }).get();
    alert(content.join(','));
});
//function for resetting the icons back to original positions
$('button.reset').click(function() {
    $('ul li', $transfer).each(function() {
        recycleImage($(this));
    });
});

toggleButtons();

        // image deletion function
        var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Transfer this icon back' class='ui-icon ui-icon-transfer-e-w'>Transfer this icon back</a>";
        function deleteImage( $item ) {
          $item.fadeOut(function() {
            var $list = $( "ul", $transfer ).length ?
              $( "ul", $transfer ) :
              $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $transfer );

            $item.find( "a.ui-icon-transferthick-e-w" ).remove();
            $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
              $item
                .animate({ width: "48px" })
                .find( "img" )
              .animate({ height: "36px" }, function() {
            toggleButtons();
              });
            });
          });
        }

        // image recycle function
        var transfer_icon = "<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>";
        function recycleImage( $item ) {
          $item.fadeOut(function() {
            $item
              .find( "a.ui-icon-transfer-e-w" )
                .remove()
              .end()
              .css( "width", "96px")
              .append( transfer_icon )
              .find( "img" )
                .css( "height", "72px" )
              .end()
              .appendTo( $gallery )
            .fadeIn(function() {
            toggleButtons();
            });
          });
        }
// display buttons when icon transferred across     
function toggleButtons() {
    $('div.col3 button').toggle($('> ul > li', $transfer).length > 0);
}

        // resolve the icons behavior with event delegation
        $( "ul.gallery > li" ).click(function( event ) {
          var $item = $( this ),
            $target = $( event.target );

          if ( $target.is( "a.ui-icon-transferthick-e-w" ) ) {
            deleteImage( $item );
          } else if ( $target.is( "a.ui-icon-transfer-e-w" ) ) {
            recycleImage( $item );
          }

          return false;
        });
      });

CSS

 #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;}

score 0 · Accepted Answer

JSFiddle 很有帮助！我为模态框添加了一些 HTML，添加了一些 CSS 来隐藏它，并添加了 javascript 来初始化它并将它链接到您已经为其设置的点击处理程序。这是这些添加的结果。

HTML：

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

CSS：

#gen_dialog {display:none;}

初始化对话框：

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

添加到您的 button.generate 点击处理程序的行：

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

javascript - JQuery如何在按钮单击时触发模态框（对话框）

1 回答 1

Related

Reference