I am writing a javascript code with python.
final_html_code = ""
open_popup_script1 = """
<script type='text/javascript'>
var existingPopup;
function openPopup1(links, titles) {
if (existingPopup) {
existingPopup.close();
}
existingPopup = window.open('', '_blank', 'left=20,top=20,width=500,height=300,toolbar=1,resizable=0');
for (var i = 0; i < links.length; i++) {
existingPopup.document.write('<p><a href="' + links[i] + '" target="_blank" style="font-size: 12px;">' + titles[i] + '</a></p>');
}
}
</script>
"""
for category in categories:
df = pd.read_excel(f"C:/Users/U017831/trash/2024-08-09_{category}_뉴스키워드.xlsx")
html_header = f"""
<html>
<body>
{open_popup_script1}
<div style="display: flex; flex-direction: column; align-items: center; width:380px; height:380px;
background-color:#f2f2f2; position:relative;">
"""
html_footer = f"""
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 style="font-size: 15px; color:rgba(0,0,0,0);">{category} 신규어
</h2><br>
</div>
"""
html_codes = [
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:50%; left:50%;
transform:translate(-50%, -50%); font-size:19px; color:rgb(0, 0, 128); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""",
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:20%; left:23%;
transform:translate(-50%, -50%); font-size:18px; color:rgb(0, 0, 128); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""",
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:90%; left:23%;
transform:translate(-50%, -50%); font-size:17px; color:rgb(0, 0, 128); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:93%; left:75%;
transform:translate(-50%, -50%); font-size:17px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:75%; left:28%;
transform:translate(-50%, -50%); font-size:16px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:60%; left:19%;
transform:translate(-50%, -50%); font-size:16px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:60%; left:80%;
transform:translate(-50%, -50%); font-size:16px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:40%; left:25%;
transform:translate(-50%, -50%); font-size:15px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:80%; left:70%;
transform:translate(-50%, -50%); font-size:15px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:66%; left:48%;
transform:translate(-50%, -50%); font-size:15px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}},{{titles}}); return false;' style="position:absolute; top:25%; left:55%;
transform:translate(-50%, -50%); font-size:14px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:10%; left:80%;
transform:translate(-50%, -50%); font-size:14px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:14%; left:20%;
transform:translate(-50%, -50%); font-size:14px; color:rgb(150, 206, 280); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:85%; left:50%;
transform:translate(-50%, -50%); font-size:14px; color:rgb(90, 100, 200); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:20%; left:75%;
transform:translate(-50%, -50%); font-size:14px; color:rgb(135, 206, 235); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:7%; left:29%;
transform:translate(-50%, -50%); font-size:13px; color:rgb(135, 206, 235); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:35%; left:80%;
transform:translate(-50%, -50%); font-size:13px; color:rgb(135, 206, 235); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:13%; left:55%;
transform:translate(-50%, -50%); font-size:13px; color:rgb(135, 206, 235); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:70%; left:78%;
transform:translate(-50%, -50%); font-size:13px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:45%; left:78%;
transform:translate(-50%, -50%); font-size:13px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:30%; left:13%;
transform:translate(-50%, -50%); font-size:12px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:40%; left:65%;
transform:translate(-50%, -50%); font-size:12px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup3({{links}}, {{titles}}); return false;' style="position:absolute; top:26%; left:85%;
transform:translate(-50%, -50%); font-size:11px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:5%; left:62%;
transform:translate(-50%, -50%); font-size:11px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:97%; left:41%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:47%; left:17%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(0, 100, 0); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:80%; left:16%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(0, 128, 0); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:10%; left:42%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(0, 128, 0); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:66%; left:70%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(0, 128, 0); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:76%; left:85%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:73%; left:55%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:44%; left:48%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:98%; left:77%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:98%; left:15%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:3%; left:20%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:25%; left:30%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:33%; left:32%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:36%; left:21%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:70%; left:20%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:57%; left:50%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:53%; left:19%;
transform:translate(-50%, -50%); font-size:10px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:50%; left:80%;
transform:translate(-50%, -50%); font-size:9px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:86%; left:80%;
transform:translate(-50%, -50%); font-size:9px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:83%; left:19%;
transform:translate(-50%, -50%); font-size:9px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:55%; left:85%;
transform:translate(-50%, -50%); font-size:9px; color:rgb(51,153,153); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:3%; left:47%;
transform:translate(-50%, -50%); font-size:9px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:78%; left:45%;
transform:translate(-50%, -50%); font-size:9px; color:rgb(70, 130, 180); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:30%; left:75%;
transform:translate(-50%, -50%); font-size:9px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:67%; left:20%;
transform:translate(-50%, -50%); font-size:9px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
f"""<a href="#" onclick='openPopup1({{links}}, {{titles}}); return false;' style="position:absolute; top:14%; left:80%;
transform:translate(-50%, -50%); font-size:9px; color:rgb(107, 142, 35); font-weight:bold; text-decoration:none;
white-space:nowrap;">{{word}}</a>""" ,
]
modified_html_codes = []
i = 0
count=0
df['keyword'].fillna(method='ffill', inplace=True)
unique_keywords = df['keyword'].unique()[:50]
for word in unique_keywords:
if pd.isnull(word) or word.strip() == '':
continue
related_rows = df[df['keyword'] == word]
links = related_rows['link'].tolist()
titles = related_rows['title'].apply(lambda x: x.replace('"',"").replace("'","")).tolist()
html_code = html_codes[i]
modified_html_codes.append(html_code.format(word=word, links=json.dumps(links), titles=json.dumps(titles)))
i += 1
category_html_code = html_header + "n".join(modified_html_codes) + html_footer
final_html_code+=category_html_code
final_html_code = f"""
<html>
<body>
<div style="display: flex; flex-direction: row; justify-content: space-around; width:1200px; height:380px;">
{final_html_code}
</div>
"""
I want to open up a new popup screen by clicking the title. But the thing is, when I click the title the link opens in a new tab, not in a form of a popup screen. Just wanna know what’s wrong with the code.
to sum up, I want to open a popup from a popup.
I wanted the link to open up in a form of a popup, not in a form of a full-screen tab. So I used ‘_blank’ but it didn’t work.