如何從jQuery DialogExtend測試工具獲取對話框代碼？

當我使用this site使jQuery對話框，它的作品就像一個魅力。我確實需要那個對話框，但是我怎樣才能在白色背景體中獲得該框的源代碼？如何從jQuery DialogExtend測試工具獲取對話框代碼？

我試圖螢火蟲和得到這個code，但它不工作:(

<html><head> 
    <title>Sandbox - jQuery DialogExtend</title> 
    <meta charset="utf-8"> 
    <link class="jsbin" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"> 
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script class="jsbin" src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="jquery.dialogextend.1_0_1.js"></script> 
    <style id="jsbin-css"> 
    body { color: #333333; font-family: Times, Helvetica, Arial; font-size: 16px; } 
    .ui-dialog { font-size: 12px; } 
    /***** HEADER *****/ 
    header { background-color: #f0f0f0; border-radius: 1em; box-shadow: inset 0 0 10px gray; padding: 1em 1.5em 1.5em 1.5em; } 
    header h1 { margin: 0 0 0.5em 0; } 
    header ul { margin: 1em 0 0 0; } 
    /***** CONTENT *****/ 
    section fieldset { margin: 5px; width: 200px; } 
    section label { cursor: pointer; } 
    #config-icon .wrapper { clear: both; } 
    #config-icon ins { float: left; margin: 0 5px 0 0; } 
    #config-icon label { float: left; } 
    #config-icon select { float: right; width: 100px; } 
    #config-method button { width: 48%; } 
    /***** FOOTER *****/ 
    footer { clear: both; padding-top: 2em; } 
    footer button { background-color: #e0e0e0; border: none; border-radius: 1em; box-shadow: 0 5px 5px silver; cursor: pointer; font-size: 300%; padding: 10px 0 10px 0; text-align: center; width: 100%; } 
    footer button:hover { background-color: #d0d0d0; box-shadow: 0 5px 5px #aaaaaa; } 
    footer button:active { box-shadow: 0 4px 4px #aaaaaa; position: relative; top: 1px; } 
    </style> 
<body style="cursor: auto;"> 

<section> 
    <form id="my-form"> 

     <div style="float: left;"> 


     </div> 
     <div style="float: left;"> 


     </div> 
     <div style="float: left;"> 

     </div> 
     <div style="float: left;"> 


     </div> 
    </form> 
</section> 
<br clear="all"> 

<script> 
$(function(){ 

    // preview icon 
    $("#config-icon select") 
     .change(function(){ 
      var icon = "<span class='ui-icon "+$(this).val()+"'></span>"; 
      $(this).parents(".wrapper").find("ins").html(icon); 
     }) 
     .trigger("change"); 


    // click to open dialog 
    $("#my-button").click(function(){ 
     //dialog options 
     var dialogOptions = { 
      "title" : "[email protected]" + new Date().getTime(), 
      "width" : 400, 
      "height" : 300, 
      "modal" : $("#is-modal").is(":checked"), 
      "resizable" : $("#is-resizable").is(":checked"), 
      "close" : function(){ $(this).remove(); } 
     }; 
     if ($("#button-cancel").is(":checked")) { 
      dialogOptions.buttons = { "Cancel" : function(){ $(this).dialog("close"); } }; 
     } 
     // dialog-extend options 
     var dialogExtendOptions = { 
      "close" : $("#button-close").is(":checked"), 
      "maximize" : $("#button-maximize").is(":checked"), 
      "minimize" : $("#button-minimize").is(":checked"), 
      "dblclick" : $("#my-form [name=dblclick]:checked").val() || false, 
      "titlebar" : $("#my-form [name=titlebar]:checked").val() || false 
     }; 
     $("#my-form [name=icon]").each(function(){ 
      if ($(this).find("option:selected").html() != "(default)") { 
       dialogExtendOptions.icons = dialogExtendOptions.icons || {}; 
       dialogExtendOptions.icons[$(this).attr("rel")] = $(this).val(); 
      } 
     }); 
     $("#my-form [name=event]").each(function(){ 
      if ($(this).is(":checked")) { 
       dialogExtendOptions.events = dialogExtendOptions.events || {}; 
       dialogExtendOptions.events[$(this).attr("rel")] = function(evt, dlg) { 
        $(dlg).prepend(evt.type+"."+evt.handleObj.namespace+"@"+new Date().getTime()+"<br />"); 
       }; 
      } 
     }); 
     // open dialog 
     $("<div />").dialog(dialogOptions).dialogExtend(dialogExtendOptions); 
    }); 


    // click to invoke method 
    $("#config-method button").click(function(){ 
     var command = $(this).text(); 
     var dialog = $(".ui-dialog:last").find(".ui-dialog-content"); 
     if ($(dialog).length) { 
      if (command == 'state') { 
       alert($(dialog).dialogExtend(command)); 
      } else { 
       $(dialog).dialogExtend(command); 
      } 
     } 
    }); 

}); 
</script> 

<div id="__yael_once"></div><style class="dialog-extend-css" type="text/css">.ui-dialog .ui-dialog-titlebar-buttonpane>a { float: right; }.ui-dialog .ui-dialog-titlebar-maximize,.ui-dialog .ui-dialog-titlebar-minimize,.ui-dialog .ui-dialog-titlebar-restore { width: 19px; padding: 1px; height: 18px; }.ui-dialog .ui-dialog-titlebar-maximize span,.ui-dialog .ui-dialog-titlebar-minimize span,.ui-dialog .ui-dialog-titlebar-restore span { display: block; margin: 1px; }.ui-dialog .ui-dialog-titlebar-maximize:hover,.ui-dialog .ui-dialog-titlebar-maximize:focus,.ui-dialog .ui-dialog-titlebar-minimize:hover,.ui-dialog .ui-dialog-titlebar-minimize:focus,.ui-dialog .ui-dialog-titlebar-restore:hover,.ui-dialog .ui-dialog-titlebar-restore:focus { padding: 0; }.ui-dialog .ui-dialog-titlebar ::selection { background-color: transparent; }</style><div style="position: fixed; bottom: 1px; left: 1px; z-index: 9999;" id="dialog-extend-fixed-container"></div><div aria-labelledby="ui-dialog-title-1" role="dialog" tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 1026; outline: 0px none; position: absolute; height: 299.7px; width: 400px; top: 26px; left: 297px; float: none; margin: 0px;"><div style="white-space: normal;" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span style="overflow: hidden; width: auto;" id="ui-dialog-title-1" class="ui-dialog-title">[email protected]</span><div style="position: absolute; top: 50%; right: 0.3em; margin-top: -10px; height: 18px;" class="ui-dialog-titlebar-buttonpane"><a style="position: static; top: auto; right: auto; margin: 0px;" role="button" class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a><a role="button" class="ui-dialog-titlebar-maximize ui-corner-all" href="#"><span class="ui-icon ui-icon-extlink">maximize</span></a><a style="display: none; right: -9999em;" role="button" class="ui-dialog-titlebar-restore ui-corner-all ui-state-hover" href="#"><span class="ui-icon ui-icon-newwin">restore</span></a><a style="display: block;" role="button" class="ui-dialog-titlebar-minimize ui-corner-all ui-state-hover" href="#"><span class="ui-icon ui-icon-minus">minimize</span></a></div></div><div scrollleft="0" scrolltop="0" class="ui-dialog-content ui-widget-content ui-dialog-normal" style="display: block; width: auto; min-height: 0px; height: 200px;">[email protected]<br>[email protected]<br>[email protected]<br>[email protected]<br>[email protected]<br></div><div style="display: block;" class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button"><span class="ui-button-text">Cancel</span></button></div></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-nw"></div></div></body></html>

來源

2014-06-14 noob

試試這個http://jsfiddle.net/taditdash/vvjj8/show

HTML代碼

<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" /> 
<div id="dialog-confirm"></div>

JavaScript的

function fnOpenNormalDialog() { 
    $("#dialog-confirm").html("Confirm Dialog Box"); 

    // Define the Dialog and its properties. 
    $("#dialog-confirm").dialog({ 
     resizable: false, 
     modal: true, 
     title: "Modal", 
     height: 250, 
     width: 400, 
     buttons: { 
      "Yes": function() { 
       $(this).dialog('close'); 
       callback(true); 
      }, 
       "No": function() { 
       $(this).dialog('close'); 
       callback(false); 
      } 
     } 
    }); 
} 

$('#btnOpenDialog').click(fnOpenNormalDialog); 

function callback(value) { 
    if (value) { 
     alert("Confirmed"); 
    } else { 
     alert("Rejected"); 
    } 
}

並沒有css需要

來源

2014-06-14 10:41:57 MLegendEr

其良好的bt它不是我想要的：「（ – noob

在這裏你有更多的他們http://www.sitepoint.com/14-jquery-modal-dialog-boxes/ – MLegendEr

實際上，我不喜歡其他對話框：/我喜歡這一個，但我無法得到確切的代碼:( – noob

如何從jQuery DialogExtend測試工具獲取對話框代碼？

回答

相關問題