Question

我创建了一个托管模态div的背景div。

我已将模态div设置为具有css：

public class auth extends AppCompatActivity implements ITrueCallback{

private TrueButton truebutton = null;
private TrueClient trueClient = null;

private String mTruecallerRequestNonce = null;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_auth);
    truebutton = (TrueButton) findViewById(R.id.com_truecaller_android_sdk_truebutton);

    boolean isUsable = truebutton.isUsable();
    if(isUsable) {
        trueClient = new TrueClient(auth.this, auth.this);
        truebutton.setTrueClient(trueClient);
    }
    else {
        truebutton.setVisibility(View.GONE);
    }

    truebutton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            trueClient.getTruecallerUserProfile(auth.this);
        }
    });
}


@Override
protected void onResume() {
    mTruecallerRequestNonce = trueClient.generateRequestNonce();
    super.onResume();
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if(trueClient!=null && trueClient.onActivityResult(requestCode, resultCode, data)) {
        return;
    }
    super.onActivityResult(requestCode, resultCode, data);
}

@Override
public void onSuccesProfileShared(@NonNull TrueProfile trueProfile) {
    Toast.makeText(auth.this, trueProfile.firstName + " " + trueProfile.lastName, Toast.LENGTH_LONG).show();
}

@Override
public void onFailureProfileShared(@NonNull TrueError trueError) {
    Log.e("error code", trueError.getErrorType() + " ");
}
}

然后我创建了另一个要添加的类来显示它

.modal {
    opacity: 0.01;
    top: 20px;
    transition: all ease-in 200ms;
}

但是，当open类被添加到div时，chrome会显示被删除的属性（a.k.a没有生效或被覆盖）。

请参阅codepen进行演示。您可以单击背景以再次隐藏模态。

为什么它没有正确过渡？

Answer 1

因为您在CSS中将.model-open 放在 .modal之前。

.modal {
  position: absolute;
  z-index: 101;
  transition: all 300ms ease-in-out;
  top: 20px;
  opacity: 0.01;
  width: 500px;
  background-color: white;
  left: 50%;
  margin-left: -250px;
}

.modal-open {
  top: 50px;
  opacity: 1;
}

https://codepen.io/anon/pen/KvdZMa

Answer 2

你可以使用

.modal.modal-open {
  top: 50px;
  opacity: 1;
}

覆盖.modal{}

Answer 3

您应该将private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) { if (webBrowser1.ReadyState == WebBrowserReadyState.Complete) { webBrowser1.Document.Body.MouseDown += new HtmlElementEventHandler(Body_MouseDown); } }添加到!important

.modal-open

或者像这样覆盖.modal-open { top: 50px !important; opacity: 1 !important; }

.modal

滑入绝对定位的模态

3 个答案: