重新创建/复制 Twitter 的@username 信息模态框

Question

在 Twitter 上，每当我们将鼠标移到用户身上时，都会打开一个包含用户信息的模式框。我使用 Twitter API 获取模式中显示的所有信息（名称、用户名、图像、个人简介、关注者和关注者），我想在我的网站上以与在 Twitter 上相同的方式表示这些信息（从图形上讲）。

我的问题是我找不到用户的本地 Twitter 嵌入代码（比如为推文提供的代码），我也找不到正确的 CSS 和 HTML 属性以这种形式管理 Twitter 用户的确切图形显示（字体、图像大小、经过验证的图标等）我想知道是否有人可以指导我走上正确的道路。谢谢:-)

Answer 1

我终于做到了！我面临的主要问题是如何提取难以捉摸的 HTML/CSS @user 模态框，它只在 鼠标悬停 a:hover 时打开，并在你拿起鼠标时消失远离模态。最终，在 Windows/Linux 上使用 F8（或在 macOS 上使用 fn + F8）热键Abram here 解释的调试器，我能够冻结用户模式的 HTML+CSS，复制它的许多片段并再次将它们放在一起。

这是模态的完整 CSS + HTML（在 JSFiddle 上测试）：

CSS:

<style id="react-native-stylesheet">[stylesheet-group="0"]{}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
}

a, a:visited {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button,
input::-webkit-search-cancel-button,
input::-webkit-search-decoration,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
    /* display: none; */
}

[stylesheet-group="0.1"] {}

[stylesheet-group="1"] {}

[stylesheet-group="2"] {}

:focus:not([data-focusvisible-polyfill]) {
    outline: none;
}

.css-1dbjc4n {
    -ms-flex-align: stretch;
    -ms-flex-direction: column;
    -ms-flex-negative: 0;
    -ms-flex-preferred-size: auto;
    -webkit-align-items: stretch;
    -webkit-box-align: stretch;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-basis: auto;
    -webkit-flex-direction: column;
    -webkit-flex-shrink: 0;
    align-items: stretch;
    border: 0 solid black;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    min-height: 0px;
    min-width: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: relative;
    z-index: 0;
}

.css-901oao {
    border: 0 solid black;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 1.00);
    display: inline;
    font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.css-16my406 {
    color: inherit;
    font: inherit;
    white-space: inherit;
}

.r-13awgt0 {
    -ms-flex-negative: 1;
    -ms-flex-positive: 1;
    -ms-flex-preferred-size: 0%;
    -webkit-box-flex: 1;
    -webkit-flex-basis: 0%;
    -webkit-flex-grow: 1;
    -webkit-flex-shrink: 1;
    flex-basis: 0%;
    flex-grow: 1;
    flex-shrink: 1;
}

.r-4qtqp9 {
    display: inline-block;
}

.r-ywje51 {
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
}

.r-hvic4v {
    /* display: none; */
}

.r-1adg3ll {
    display: block;
}

.r-12vffkv>* {
    pointer-events: auto;
}

.r-12vffkv {
    pointer-events: none !important;
}

.r-14lw9ot {
    background-color: rgba(255, 255, 255, 1.00);
}

.r-1p0dtai {
    bottom: 0px;
}

.r-1d2f490 {
    left: 0px;
}

.r-1xcajam {
    position: fixed;
}

.r-zchlnj {
    right: 0px;
}

.r-ipm5af {
    top: 0px;
}

.r-yyyyoo {
    fill: currentcolor;
}

.r-1xvli5t {
    height: 1.25em;
}

.r-dnmrzs {
    max-width: 100%;
}

.r-bnwqim {
    position: relative;
}

.r-1plcrui {
    vertical-align: text-bottom;
}

.r-lrvibr {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.r-13gxpu9 {
    color: rgba(29, 161, 242, 1.00);
}

.r-wy61xf {
    height: 72px;
}

.r-u8s1d {
    position: absolute;
}

.r-1blnp2b {
    width: 72px;
}

.r-1ykxob0 {
    top: 60%;
}

.r-1b2b6em {
    line-height: 2em;
}

.r-q4m81j {
    text-align: center;
}

/* box shadow
.r-1upvrn0 {
    box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px;
} */

.r-14lw9ot {
    background-color: rgba(255,255,255,1.00);
}

.r-t23y2h {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    border: 1px solid #ccd6dd;
}

.r-105ug2t {
    pointer-events: auto !important;
}

.r-12vffkv > * {
    pointer-events: auto;
}

.r-12vffkv {
    pointer-events: none!important;
}

Style Attribute {
    font-size: 15px;
}

.r-1ipicw7 {
    width: 500px;
}

.r-1r5jyh0 {
    min-height: 130px;
}

.r-1oqcu8e {
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
}

.r-1wtj0ep {
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.r-18u37iz {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    flex-direction: row;
}

.r-1b2z7po {
    width: 59px;
}

.r-b5ptkt {
    height: 59px;
}

.r-6416eg {
    transition-property: background-color, box-shadow;
}

.r-o7ynqc {
    transition-duration: 0.2s;
}

.r-1loqt21 {
    cursor: pointer;
}

.r-1udh08x {
    overflow-x: hidden;
    overflow-y: hidden;
}

.css-18t94o4 {
    cursor: pointer;
}

.css-4rbku5 {
    background-color: rgba(0, 0, 0, 0);
    color: inherit;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    text-align: inherit;
    font: inherit;
    list-style: none;
    text-decoration: none;
}

.r-13qz1uu {
    width: 100%;
}

.r-1pi2tsx {
    height: 100%;
}

.r-1mlwlqe {
    flex-basis: auto;
}

.r-417010 {
    z-index: 0;
}

.r-4gszlv {
    background-size: cover;
}

.r-u6sd8q {
    background-repeat: no-repeat;
}

.r-vvn4in {
    background-position: center center;
}

.r-1wyyakw {
    z-index: -1;
}

.r-1niwhzg {
    background-color: rgba(0, 0, 0, 0);
}

.css-9pa8cd {
    bottom: 0px;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100%;
    z-index: -1;
}

img[Attributes Style] {
    -webkit-user-drag: element;
    user-select: none;
}

.r-1mi75qu {
    box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 2px inset;
}

.r-1txz7kw {
    border-bottom-color: rgba(0, 0, 0, 0.02);
    border-left-color: rgba(0, 0, 0, 0.02);
    border-right-color: rgba(0, 0, 0, 0.02);
    border-top-color: rgba(0, 0, 0, 0.02);
}

.r-rs99b7 {
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
}

.r-bcqeeo {
    min-width: 0px;
}

.r-1dhvaqw {
    min-width: calc(62.79px);
}

.r-1vuscfd {
    min-height: 39px;
}

.r-1w2pmg {
    height: 0px;
}

.r-1fneopy {
    padding-left: 1em;
    padding-right: 1em;
}

.r-p1n3y5 {
    border-bottom-color: rgb(29, 161, 242);
    border-left-color: rgb(29, 161, 242);
    border-right-color: rgb(29, 161, 242);
    border-top-color: rgb(29, 161, 242);
}

.r-1phboty {
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-style: solid;
}

.r-eljoum {
    line-height: 1;
}

.r-vw2c0b {
    font-weight: bold;
}

.r-a023e6 {
    font-size: 15px;
}

.r-1qd0xha {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

.r-qvutc0 {
    overflow-wrap: break-word;
}

.r-1awozwy {
    -webkit-box-align: center;
    align-items: center;
}

.r-1777fci {
    -webkit-box-pack: center;
    justify-content: center;
}

.r-16y2uox {
    -webkit-box-flex: 1;
    flex-grow: 1;
}

.r-13gxpu9 {
    color: rgba(29,161,242,1.00);
}

.r-6koalj {
    display: flex;
}

.r-ad9z0x {
    line-height: 1.3125;
}

.css-bfa6kz {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-1g94qm0 {
    margin-top: 5px;
}

.r-1wbh5a2 {
    flex-shrink: 1;
}

.r-3s2u2q {
    white-space: nowrap;
}

.r-16dba41 {
    font-weight: 400;
}

.r-1q142lx {
    flex-shrink: 0;
}

.r-9cviqr {
    margin-left: 2px;
}

svg:not(:root) {
    overflow: hidden;
}

.r-hkyrab {
    color: rgb(20, 23, 26);
}

.r-1re7ezh {
    color: rgb(101, 119, 134);
}

.r-156q2ks {
    margin-top: 10px;
}

.r-1joea0r {
    margin-left: 20px;
}

.r-sdzlij {
    border-bottom-left-radius: 9999px;
    border-bottom-right-radius: 9999px;
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
}

.r-bt1l66 {
    min-height: 20px;
}

.r-18u37iz {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    flex-direction: row;
}

.r-1q142lx {
    flex-shrink: 0;
}

.r-18u37iz {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    flex-direction: row;
}

.r-z80fyv {
    height: 20px;
}

.r-19wmn03 {
    width: 20px;
}

.r-1g40b8q {
    z-index: 3;
}

.r-11mg6pl {
    border-bottom-color: rgb(255, 255, 255);
    border-left-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-top-color: rgb(255, 255, 255);
}

.r-z80fyv {
    height: 20px;
}

.r-1imd94c {
    margin-left: -10px;
}

.r-19wmn03 {
    width: 20px;
}

.r-136ojw6 {
    z-index: 2;
}

.r-11mg6pl {
    border-bottom-color: rgb(255, 255, 255);
    border-left-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-top-color: rgb(255, 255, 255);
}

.r-1udh08x {
    overflow-x: hidden;
    overflow-y: hidden;
}

.r-rs99b7 {
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
}

.r-sdzlij {
    border-bottom-left-radius: 9999px;
    border-bottom-right-radius: 9999px;
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
}

.r-1n0xq6e {
    margin-left: 10px;
}

.r-1sf4r6n {
    line-height: calc(19.6875px);
}

.r-n6v787 {
    font-size: 13px;
}

.r-1re7ezh {
    color: rgb(101, 119, 134);
}

.r-16dba41 {
    font-weight: 400;
}

.r-1qd0xha {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

.r-qvutc0 {
    overflow-wrap: break-word;
}

.r-bcqeeo {
    min-width: 0px;
}

.r-1wbh5a2 {
    flex-shrink: 1;
}

</style>

HTML:

<div class="css-1dbjc4n r-u8s1d" style="left: 10px; top: 10px;">
    <div style="">
        <div class="css-1dbjc4n">
            <div class="css-1dbjc4n r-14lw9ot r-t23y2h r-1upvrn0">
                <div class="css-1dbjc4n r-1r5jyh0 r-1ipicw7">
                    <div class="css-1dbjc4n r-1oqcu8e">
                        <div class="css-1dbjc4n r-18u37iz r-1wtj0ep">
                            <a aria-haspopup="false" href="https://twitter.com/RandPaul" aria-hidden="true" role="link" tabindex="-1" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-sdzlij r-1loqt21 r-b5ptkt r-1udh08x r-o7ynqc r-6416eg r-1b2z7po">
                                <div class="css-1dbjc4n r-1adg3ll r-1udh08x">
                                    <div class="r-1adg3ll r-13qz1uu" style="padding-bottom: 100%;"></div>
                                    <div class="r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-ipm5af r-13qz1uu">
                                        <div aria-label="Senator Rand Paul" class="css-1dbjc4n r-sdzlij r-1p0dtai r-1mlwlqe r-1d2f490 r-1udh08x r-u8s1d r-zchlnj r-ipm5af r-417010">
                                            <div class="css-1dbjc4n r-1niwhzg r-vvn4in r-u6sd8q r-4gszlv r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-13qz1uu r-1wyyakw" style="background-image: url(&quot;https://pbs.twimg.com/profile_images/681152691461042177/_PrgDgFA_x96.jpg&quot;);"></div>
                                                <img alt="Senator Rand Paul" draggable="true" src="https://pbs.twimg.com/profile_images/681152691461042177/_PrgDgFA_x96.jpg" class="css-9pa8cd">
                                        </div>
                                    </div>
                                </div>
                                <div aria-haspopup="false" class="css-1dbjc4n r-1txz7kw r-sdzlij r-rs99b7 r-1p0dtai r-1mi75qu r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-o7ynqc r-6416eg"></div>
                            </a>

                            <!-- Top Right Follow Button -->
                            <div class="css-1dbjc4n r-bcqeeo">
                                <div aria-haspopup="false" role="button" data-focusable="true" tabindex="0" class="css-18t94o4 css-1dbjc4n r-1niwhzg r-p1n3y5 r-sdzlij r-1phboty r-rs99b7 r-1w2pmg r-1vuscfd r-1dhvaqw r-1fneopy r-o7ynqc r-6416eg r-lrvibr" data-testid="216881337-follow">
                                    <div dir="auto" class="css-901oao r-1awozwy r-13gxpu9 r-6koalj r-18u37iz r-16y2uox r-1qd0xha r-a023e6 r-vw2c0b r-1777fci r-eljoum r-dnmrzs r-bcqeeo r-q4m81j r-qvutc0"><span class="css-901oao css-16my406 css-bfa6kz r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0"> <span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">Follow</span></span>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Top Right Follow Button -->

                        </div>
                        <div class="css-1dbjc4n r-1g94qm0"><a aria-haspopup="false" href="/RandPaul" role="link" data-focusable="true" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-1loqt21 r-1wbh5a2 r-dnmrzs r-1ny4l3l">
                                <div class="css-1dbjc4n r-1wbh5a2 r-dnmrzs r-1ny4l3l">
                                    <div class="css-1dbjc4n r-1awozwy r-18u37iz r-dnmrzs"><!-- LINE account name + verification badge --><!-- account name --><div dir="auto" class="css-901oao css-bfa6kz r-hkyrab r-1qd0xha r-a023e6 r-vw2c0b r-ad9z0x r-bcqeeo r-3s2u2q r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0"> <span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">Senator Rand Paul</span></span></div><!-- end of account name --><!-- verified badge --><div dir="auto" class="css-901oao r-hkyrab r-18u37iz r-1q142lx r-1qd0xha r-a023e6 r-16dba41 r-ad9z0x r-bcqeeo r-qvutc0"><svg viewBox="0 0 24 24" aria-label="Verified account" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-1xvli5t r-9cviqr r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z"></path></g></svg></div><!-- end of verified badge --><!-- END OF LINE account name + verification badge --></div>
                                    <!-- LINE @username -->
                                    <div class="css-1dbjc4n r-18u37iz r-1wbh5a2"><div dir="ltr" class="css-901oao css-bfa6kz r-1re7ezh r-18u37iz r-1qd0xha r-a023e6 r-16dba41 r-ad9z0x r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">@RandPaul</span></div>
                                    </div>
                                    <!-- END OF LINE @username -->
                                </div>
                            </a>
                        </div>
                        <!-- bio -->
                        <div class="css-1dbjc4n r-18u37iz r-1wtj0ep r-156q2ks">
                            <div dir="auto" class="css-901oao r-hkyrab r-1qd0xha r-a023e6 r-16dba41 r-ad9z0x r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">U.S. Senator for Kentucky | I fight for the Constitution, individual liberty and the freedoms that make this country great.</span></div>
                        </div>
                        <!-- end of bio -->
                        <!-- following / followers line -->
                        <div class="css-1dbjc4n r-18u37iz r-1wtj0ep r-156q2ks">
                            <div class="css-1dbjc4n r-18u37iz">
                                <!-- following -->
                                <div class="css-1dbjc4n">
                                    <a title="499" href="/RandPaul/following" dir="auto" role="link" data-focusable="true" class="css-4rbku5 css-18t94o4 css-901oao r-hkyrab r-1loqt21 r-1qd0xha r-a023e6 r-16dba41 r-ad9z0x r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-vw2c0b r-ad9z0x r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">499</span></span><span class="css-901oao css-16my406 r-1re7ezh r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0"> <span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">Following</span></span></a>
                                </div>
                                <!-- end of following -->
                                <!-- followers -->
                                <div class="css-1dbjc4n r-1joea0r">
                                    <a title="2,711,485" href="/RandPaul/followers" dir="auto" role="link" data-focusable="true" class="css-4rbku5 css-18t94o4 css-901oao r-hkyrab r-1loqt21 r-1qd0xha r-a023e6 r-16dba41 r-ad9z0x r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-vw2c0b r-ad9z0x r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">2.7M</span></span> <span class="css-901oao css-16my406 r-1re7ezh r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">Followers</span></span></a>
                                </div>
                                <!-- end of followers -->
                            </div>
                        </div>
                        <!-- end of following / followers line -->
                        <div class="css-1dbjc4n r-156q2ks">
                            <div class="css-1dbjc4n r-bt1l66">
                                <div>
                                    <div class="css-1dbjc4n"><a aria-haspopup="false" href="/RandPaul/followers_you_follow" aria-label="Followers you know" role="link" data-focusable="true" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-1loqt21">
                                            <div class="css-1dbjc4n r-18u37iz">
                                                <div class="css-1dbjc4n r-18u37iz r-1q142lx">
                                                    <div aria-haspopup="false" role="presentation" class="css-1dbjc4n r-11mg6pl r-sdzlij r-rs99b7 r-z80fyv r-1udh08x r-19wmn03 r-1g40b8q">
                                                        <div class="css-1dbjc4n r-1adg3ll r-1udh08x">
                                                            <div class="r-1adg3ll r-13qz1uu" style="padding-bottom: 100%;"></div>
                                                            <div class="r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-ipm5af r-13qz1uu">
                                                                <div class="css-1dbjc4n r-sdzlij r-1p0dtai r-1mlwlqe r-1d2f490 r-1udh08x r-u8s1d r-zchlnj r-ipm5af r-417010">
                                                                    <div class="css-1dbjc4n r-1niwhzg r-vvn4in r-u6sd8q r-4gszlv r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-13qz1uu r-1wyyakw" style="background-image: url(&quot;https://pbs.twimg.com/profile_images/1236672051710169089/hPQAD4xC_normal.jpg&quot;);"></div><img alt="" draggable="true" src="https://pbs.twimg.com/profile_images/1236672051710169089/hPQAD4xC_normal.jpg" class="css-9pa8cd">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div aria-haspopup="false" role="presentation" class="css-1dbjc4n r-11mg6pl r-sdzlij r-rs99b7 r-z80fyv r-1imd94c r-1udh08x r-19wmn03 r-136ojw6">
                                                        <div class="css-1dbjc4n r-1adg3ll r-1udh08x">
                                                            <div class="r-1adg3ll r-13qz1uu" style="padding-bottom: 100%;"></div>
                                                            <div class="r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-ipm5af r-13qz1uu">
                                                                <div class="css-1dbjc4n r-sdzlij r-1p0dtai r-1mlwlqe r-1d2f490 r-1udh08x r-u8s1d r-zchlnj r-ipm5af r-417010">
                                                                    <div class="css-1dbjc4n r-1niwhzg r-vvn4in r-u6sd8q r-4gszlv r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-13qz1uu r-1wyyakw" style="background-image: url(&quot;https://pbs.twimg.com/profile_images/1239534881643913216/v7JSjjGp_normal.jpg&quot;);"></div><img alt="" draggable="true" src="https://pbs.twimg.com/profile_images/1239534881643913216/v7JSjjGp_normal.jpg" class="css-9pa8cd">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div aria-haspopup="false" role="presentation" class="css-1dbjc4n r-11mg6pl r-sdzlij r-rs99b7 r-z80fyv r-1imd94c r-1udh08x r-19wmn03 r-184en5c">
                                                        <div class="css-1dbjc4n r-1adg3ll r-1udh08x">
                                                            <div class="r-1adg3ll r-13qz1uu" style="padding-bottom: 100%;"></div>
                                                            <div class="r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-ipm5af r-13qz1uu">
                                                                <div class="css-1dbjc4n r-sdzlij r-1p0dtai r-1mlwlqe r-1d2f490 r-1udh08x r-u8s1d r-zchlnj r-ipm5af r-417010">
                                                                    <div class="css-1dbjc4n r-1niwhzg r-vvn4in r-u6sd8q r-4gszlv r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-13qz1uu r-1wyyakw" style="background-image: url(&quot;https://pbs.twimg.com/profile_images/1239331466057854976/3DoJFQIl_normal.jpg&quot;);"></div><img alt="" draggable="true" src="https://pbs.twimg.com/profile_images/1239331466057854976/3DoJFQIl_normal.jpg" class="css-9pa8cd">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div dir="auto" class="css-901oao r-1re7ezh r-1wbh5a2 r-1qd0xha r-n6v787 r-16dba41 r-1sf4r6n r-1n0xq6e r-bcqeeo r-qvutc0">Followed by <span class="css-901oao css-16my406 r-1qd0xha r-16dba41 r-ad9z0x r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">LightWarrior1776</span></span>, <span class="css-901oao css-16my406 r-1qd0xha r-16dba41 r-ad9z0x r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">Joltin' Joe Biden Boosters</span></span>, and 659 others you follow</div>
                                            </div>
                                        </a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

重新创建/复制 Twitter 的@username 信息模态框

Recreate / Copy Twitter's @username Info Modal Box

css

screen-scraping

modal-dialog

web-scraping

bootstrap-modal