装载没有显示在框内

Question

在ajax调用期间，我使用了jquery和css来显示带有灰色背景的加载器。问题是我需要加载器和灰色背景只能在如下所示的框中可见，并在中心加载文本和图标

我的代码工作正常但是带有灰色背景的加载器显示整个页面，如下所示。

任何人都可以告诉我一些解决方案吗

我的代码如下所示

JSFiddle

public class ChatWithAttorney extends Activity {
    ImageView btnBack;
    ListView chatList;
    EditText etMsg;
    Button btnSend;
    String msg_to_send;
    ArrayAdapter<String> adapter;
    ArrayList<String> listMsg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chatwithattorny);
        btnBack = (ImageView) findViewById(R.id.btnback);
        chatList = (ListView) findViewById(R.id.chatList);
        etMsg = (EditText) findViewById(R.id.etMsg);
        btnSend = (Button) findViewById(R.id.btnSend);
        listMsg = new ArrayList<String>();
        adapter = new ArrayAdapter<String>(this, R.layout.chat_list_text, R.id.tvSentMsg,listMsg);
        chatList.setAdapter(adapter);
        btnSend.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                try {
                    msg_to_send = URLEncoder.encode(etMsg.getText().toString(),
                            "utf-8");
                    listMsg.add(msg_to_send);
                    adapter.notifyDataSetChanged();
                } catch (UnsupportedEncodingException e) {
                    e.printStackTrace();
                }
            }
        });
    }

Answer 1

您的装载机的位置为fixed，这取得了视口的位置而不是元素的位置。

    $('#resultLoading>div:first').css({
        'width': '250px',
        'height':'75px',
        'text-align': 'center',
        'position': 'absolute',
        'top':'0',
        'left':'0',
        'right':'0',
        'bottom':'0',
        'margin':'auto',
        'font-size':'16px',
        'z-index':'10',
        'color':'#ffffff'

    });

    $('#resultLoading').css({
        'width':'100%',
        'height':'100%',
        'position':'absolute',
        'z-index':'10000000',
        'top':'0',
        'left':'0',
        'right':'0',
        'bottom':'0',
        'margin':'auto'
    });

同时为myBox提供relative的职位。