为什么我的“选择选项”显示在jquery UI对话框的后面？

Question

I am trying to make a character Creation form and am using select fields for certain information of which there are only so many possibilities but when I run the script my options show up behind the dialog (which the select element is placed in) that I created how can I fix this??? 我正在尝试创建一个字符创建表单，并使用选择字段来获取某些信息，而这些信息的可能性只有很多，但是当我运行脚本时，我的选项会显示在我创建的对话框（选择元素所在的对话框）后面我怎样才能解决这个问题？？？

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Icebreaker Characters</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.11.3.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
   *
   {
       outline: none !important;
   }

   body
   {
       font-size: 62.5%;
   }

   label, input
   {
       display: block;
   }

   input.text
   {
       margin-bottom: 12px;
       width: 95%;
       padding: 0.4em;
   }

   fieldset
   {
       padding: 0px;
       border: 0px;
       margin-top: 25px;
   }

   h1
   {
       font-size: 1.2em;
       margin: 0.6em 0px;
   }

   div#characters-contain
   {
       width: 350px;
       margin: 20px 0px;
   }

   div#characters-contain table
   {
       margin: 1em 0px;
       border-collapse: collapse;
       width: 100%;
   }

   div#characters-contain table td, div#characters-contain table th
   {
       border: 1px solid #EEEEEE;
       padding: 0.6em 10px;
       text-align: left;
   }

   .ui-dialog .ui-state-error
   {
       padding: .3em;
   }

   .validateTips
   {
       border: 1px solid transparent; padding: 0.3em;
   }

   select
   {
       width: 200px;
   }

   .overflow
   {
       height: 200px;
       position: absolute;
       z-index: 1;
   }
  </style>
  <script>
   $(function()
   {
   $( "#hstyle" ).selectmenu()
         .selectmenu()
         .selectmenu( "menuWidget" )
          .addClass( "overflow" );
   });

   $(function()
   {
       var dialog, form,
       cname = $("#cname"),
       fname = $("#fname"),
       mname = $("#mname"),
       lname = $("#lname"),
       eye   = $("#eye"),
       hcol  = $("#hcol"),
       allFields = $( [] ).add( cname ).add( fname ).add( mname ).add( lname ),
       tips = $( ".validateTips" ),
       mini = 1,
       maxi = 20,
       regex = /^[a-z]([0-9a-z_\-\s])+$/i,
       errregex = " can only contaion Username may consist of a-z, 0-9, underscores, hyphens, spaces and must begin with a letter."

       function updateTips( t )
       {
           tips
             .text( t )
             .addClass( "ui-state-highlight");
           setTimeout(function()
           {
               tips.removeClass( "ui-state-highlight", 1500 );
           }, 500);
       }

       function checkLength( o, n, min, max )
       {
           if ( o.val().length > max || o.val().length < min )
           {
               o.addClass( "ui-state-error" );
               updateTips( "Length of " + n + " must be between " + min + " and " + max + "." );
               return false;
           }
           else
           {
               return true
           }
       }

       function checkRegexp( o, regexp, n)
       {
           if( !( regexp.test( o.val() ) ) )
           {
               o.addClass( "ui-state-error" );
               updateTips( n );
               return false;
           }
           else
           {
               return true;
           }
       }

       function addCharacter()
       {
           var valid = true;

           valid = valid && checkLength( cname, "Codename", mini, maxi );
           valid = valid && checkLength( fname, "First name", mini, maxi );
           valid = valid && checkLength( mname, "Middle name", mini, maxi);
           valid = valid && checkLength( lname, "Last name", mini, maxi);

           valid = valid && checkRegexp( cname, regex, "Codename " + errregex);
           valid = valid && checkRegexp( fname, regex, "First name " + errregex);
           valid = valid && checkRegexp( mname, regex, "Middle name " + errregex);
           valid = valid && checkRegexp( lname, regex, "Last name " + errregex);

           if ( valid )
           {
               $( "#characters tbody" ).append( "<tr>" +
               "<td>" + cname.val() + "</td>" +
               "<td>" + fname.val() + "</td>" +
               "<td>" + mname.val() + "</td>" +
               "<td>" + lname.val() + "</td>" +
               "<td style=\"background: " + eye.val() + "\"></td>" +
               "<td style=\"background: " + hcol.val() + "\"></td>" +
               "</tr>" );
               dialog.dialog( "close" );
           }
           return valid;
       }

       dialog = $( "#dialog-form").dialog(
       {
           autoOpen: false,
           height: 300,
           width: 350,
           modal: true,
           buttons:
           {
               "Create a Character": addCharacter,
               Reset: function()
               {
                   form[ 0 ].reset();
               },
               Cancel: function()
               {
                   dialog.dialog( "close" );
               }
           },
           close: function()
           {
               form[ 0 ].reset();
               allFields.removeClass( "ui-state-error" );
           }
       });

       form = dialog.find( "form" ).on( "submit", function( event )
       {
           event.preventDefault();
           addCharacter();
       });

       $( "#Create-character" ).button().on("click", function()
       {
           dialog.dialog( "open" );
       });
   });
  </script>
 </head>
 <body>
  <div id="dialog-form" title="Create Character">
   <p class="validateTips">All Form Fields are required.</p>
   <form>
    <fieldset>
     <label for="cname">Code Name:&nbsp;</label>
     <input type="text" name="cname" id="cname" class="text ui-widget-content ui-corner-all">
     <label for="fname">First Name:&nbsp;</label>
     <input type="text" name="fname" id="fname" class="text ui-widget-content ui-corner-all">
     <label for="mname">Middle Name:&nbsp;</label>
     <input type="text" name="mname" id="mname" class="text ui-widget-content ui-corner-all">
     <label for="lname">Last Name:&nbsp;</label>
     <input type="text" name="lname" id="lname" class="text ui-widget-content ui-corner-all">
     <label for="eye">Eye Color:&nbsp;</label>
     <input type="color" name="eye" id="eye" class="text ui-widget-content ui-corner-all">
     <label for="hcol">Hair Color:&nbsp;</label>
     <input type="color" name="hcol" id="hcol" class="text ui-widget-content ui-corner-all">
     <fieldset>
      <label for="hstyle">Hair Style:&nbsp;</label>
      <select name="hstyle" id="hstyle">
       <option>Straight</option>
       <option>Curly</option>
      </select>
     </fieldset>
     <!-- Allow form submission with keyboard without duplicating the dialog button -->
     <input type="submit" tabindex="-1" style="position:absolute; top:-1000px;">
    </fieldset>
   </form>
  </div>
  <div id="characters-contain" class="ui-widget">
   <h1>Existing Characters:</h1>
   <table id="characters" class="ui-widget ui-widget-content">
    <thead>
     <tr class="ui-widget-header">
      <th>
       Code Name
      </th>
      <th>
       First Name
      </th>
      <th>
       Middle Name
      </th>
      <th>
       Last Name
      </th>
      <th>
       Eye Color
      </th>
      <th>
       Hair Color
      </th>
     </tr>
    </thead>
    <tbody>
    </tbody>
   </table>
  </div>
  <button id="Create-character">Create New Character</button>
 </body>
</html>

Answer 1

Set the z-index of .ui-selectmenu-menu to 102. 将.ui-selectmenu-menu的z-index设置为102。

The z-index of the dialog is greater than the select menu. 对话框的Z索引大于选择菜单。

You can see the working fiddle here: https://jsfiddle.net/th1x3xro/3/ 您可以在这里看到有效的小提琴： https : //jsfiddle.net/th1x3xro/3/

为什么我的“选择选项”显示在jquery UI对话框的后面？

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-07-09 05:25:34

为什么我的“选择选项”显示在jquery UI对话框的后面？

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-07-09 05:25:34

解决方案1
2 已采纳 2015-07-09 05:25:34