I wanted to create a page where, when you click on a word a popup opens and gives you the definition. I have used a simple JS fetch with Meriam Webster API.
Here is the link of my "github pages" site : My github.oi
The problem is when the popup is closed using the X button the page jumps to the top. What I am asking is there any way to prevent that behavior.
Here is the Html code :
<a id="click_it" href="#popup1"> </a>
<div id="popup1" >
<div id="popup" ></div>
</div>
Css :
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h3 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
And to trigger I am simulating duble click with js inside an event listener (a portion):
document.getElementById('click_it').click();
CodePudding user response：
Check out the improved JS, without changing that #hash at all.
// Selection Logic : Select Only Words
const word = document.querySelectorAll('.text');
// Dom : Add Span To Each Word
function addSpan(item) {
let html = item.innerText;
let words = html.split(" ");
let newHtml = "";
// Todo add REGEX to make sure you only select str chars.
for (let i = 0; i < words.length; i ) {
newHtml = '<span >' words[i] '</span> ';
}
item.innerHTML = newHtml;
}
word.forEach((item) => {
addSpan(item);
})
function close_it() {
document.getElementById("popup1").style.opacity = 0
document.getElementById("popup1").style.visibility = 'hidden'
return false;
}
const def = document.querySelectorAll('.line');
def.forEach((item) => {
item.addEventListener('dblclick', () => {
let word_input = 'word';
word_input = item.innerText.toString().toLowerCase();
// Data Input : Fetch
const result = async function() {
const word = await fetch(`https://dictionaryapi.com/api/v3/references/sd3/json/${word_input}?key=c81949f8-2a54-4ed6-b9c8-b9d091eab5d3`);
return word.json();
}
// Filter Logic : Get Only The Words Definitions
result().then((data) => {
let entries = data.entries();
let first_iteration = entries.next();
let items = first_iteration.value;
let definition = items[1].shortdef;
let fl = items[1].fl;
let word_title = items[1].hwi.hw.toUpperCase();
popup.innerHTML = `
<h3 id="word_title">${word_title}</h3>
<a href="#" onclick="return close_it()">×</a>
<div >
<i><strong>${fl}</strong> : ${definition}</i>
<br>
</div>`;
// document.getElementById('click_it').click();
document.getElementById("popup1").style.opacity = 1
document.getElementById("popup1").style.visibility = 'visible'
});
})
});.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h3 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
body {
margin: 25px;
display: flex;
flex-direction: column;
align-items: center;
}
div.polaroid {
width: 56%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
display: flex;
justify-content: center;
}
.img {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.title {
width: 56%;
text-align: left;
}
h1 {
text-align: center;
}
#disqus_thread {
width: 56%;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dictionary</title>
</head>
<body>
<div >
<div >
<div >
<div >
<img src="../IMAGES/neversplit.png" alt="5 Terre" style="width:100%">
<div >
<p >Life is a series of negotiations you should be prepared for: buying a car, negotiating a salary, buying a home, renegotiating rent, deliberating with your partner. Taking emotional intelligence and intuition to the next level, Never Split
the Difference gives you the competitive edge in any discussion.
</p>
</div>
</div>
<div >
<h1>About the book</h1>
<p >Never Split The Difference calls on Chris Voss’ FBI career as their top hostage negotiator. Specifically, it equips readers with the negotiating skills needed to secure business deals. Chris suggests that logic and reason are not generally effective
in producing productive negotiations. Instead, tactical empathy is the key to success, especially in complicated negotiations. This book aims to help people control negotiations with humans, rather than assume the other party is a robot. </p>
<h2>#1 : The new rules</h2>
<p >Chris Voss describes negotiation as a process of trying to convince others of your approach to a topic. So, negotiation is a type of communication that requires a specific outcome. Negotiation is built on the assumption that humans want to be
accepted and understood. Subsequently, being an active listener is an effective way to show acceptance and empathy toward the other party in the negotiation. One negotiation technique is to become an intelligent negotiator who focuses on logic
and math. In reality, humans are not always convinced by rationality, and we generally do not accept comments based on logic alone. So Chris rejects this approach. Negotiation has been a topic of study since the 1970s. Still, it was only recently
that psychologists like Kahneman and Tversky identified that we all have a habit of adopting cognitive biases. These cognitive biases lead to irrationality. These cognitive biases are relatively common. So, if we can better understand human
negotiation psychology, we can become more successful negotiators. </p>
<h2>#2: Building an Efficient Negotiation Environment</h2>
<h3>Negotiation as Information Gathering</h3>
<p >When negotiating, it is essential to establish a rapport quickly. A rapport relies on effective empathy so that you can gain trust. That said, it also relies on having as much information about your counterpart and the situation as possible.
Chris Voss provides an example from his own life of why obtaining as much information as possible is essential. Chris was involved in the negotiation process after a robbery in a Manhattan bank in 1993. Three innocent hostages were taken.
While negotiating, one of the robbers told the FBI that four people were holding the hostages. In reality, it was just him holding them hostage. Upon rewatching the robbery, Chris noticed the other robbers were only after the ATM and bailed
when he took the hostages. From obtaining this information, Chris could ascertain this robber was acting alone in this hostage situation. He was lying about the number of people as he wanted to buy time to escape. Chris successfully negotiated
this dilemma, as he had sufficient information and developed a rapport with the criminal. Chris describes negotiations as an act of discovery. Rather than a battle of arguments, he sees negotiation as a way to uncover as much information as
possible. You can start building a rapport by listening to the other party. Validate their concerns, build trust, and create a safety net that allows real conversations to flourish. Doing this produces an environment safe enough for the other
individual to talk about what they want. A rapport and trust depend on a slow negotiation process. If you seem in a hurry, the other party will feel like they are not being heard. The other party will also believe you are only negotiating
for your benefit. </p>
<h3>The Three Voices for Negotiation</h3>
<p >According to Chris Voss, there are three types of voices available to negotiators: The late-night FM DJ voice: Basically, you want to keep your voice calm and slow. You shouldn’t use this voice at all times, but you can use it selectively when
you want to create an aura of authority and trust. The playful/positive voice: This should be your default voice. It’s the voice of an easygoing, good-natured person. This voice will help encourage the other individual to start opening up.
The direct/assertive voice: This is the voice you should use most sparingly. This type of voice frequently creates pushback, so you should only use it if there is no alternative.</p>
<h3>Mirroring</h3>
<p >Mirroring is an approach that involves repeating what the other person is saying in a curious tone. Specifically, it involves using the three most critical words to frame a leading question. This approach encourages participants to reveal information,
making them feel like they are like you. You are buying time and building a relationship that will help you gather more information to inform your future decisions. Chris provides an example of the effectiveness of mirroring via a study with
waiters. Psychologist Richard Wiseman found that waiters received on average 70 percent more tips when they mirrored. So Chris Voss suggests you adopt this five-step process with all your negotiations: Use the late-night FM DJ voice (unless
circumstances insist you use one of the other voices). Start with phrases like ‘I am sorry,’ so that you display openness. Mirror the other participants to build a rapport. Use silence effectively. Repeat.
</p>
<h2>#4: Don’t Be Scared of Using “No” Tactically</h2>
<p >Chris describes the word “no” as a powerful tool when negotiating. If used effectively, the word “no” can uncover unknown points of contention. This works both ways. You should avoid pushing for a yes. Pushing for a yes will not bring you closer
to an agreement and potentially irritate the other party. Chris describes a ‘no’ as the start of the negotiation, rather than its end. For example, a party responding with “no” provides an excellent opportunity to probe them to clarify precisely
what they don’t want. Chris introduced three kinds of “yes”: Counterfeit – This is when the party sees a yes response as the easiest escape route. The party had planned to say no but did not want to deal with the repercussions. Confirmation
– This is generally straightforward. The other party provides a reflexive response to a straightforward question. Commitment – This is the most impactful type of yes. This type of yes will lead to a definite outcome, like signing a contract.
You must learn which of these yeses is being used by the other party. Understanding this will help you guide the conversation forward and get to the center of the negotiation.
</p>
<h2>#5: “That’s Right” Can Transform the Conversation</h2>
<p >This storyshot essentially builds on the idea of mirroring. Summarizing and repeating the other party’s concerns is the most effective way to get them to agree to a solution. Chris believes that a simple and clear message, like “That’s right,”
can be the most effective way to relay concerns. Chris appreciates it as far more impactful in creating negotiation breakthroughs than “Yes.” It is a more robust affirmation of the other party’s concerns. Chris recommends combining this advice
with a label and paraphrasing.
</p>
<h2>#6: Bend Their Reality</h2>
<p >There are several ways to bend the reality of the other party. For example, starting with a very low or high offer can change the entire negotiation. Similarly, Chris explains that using particular offers or ones that incorporate odd numbers
can influence parties to compromise. Here are some approaches that Chris sees as the most effective in bending the other party towards your preferences: Earn a reputation for being a “fair” negotiator. Being fair does not mean you are a pushover.
Instead, it means you are a shrewd negotiator who understands that both parties have preferences that need to be accounted for. Additionally, you can increase your chances of appearing fair by highlighting that you have something to lose if
the deal falls through. Empathy is fundamental to bending the reality of the other party. Acknowledge the other party’s fears and anchor their emotions in preparation for a loss. You want to inflame the other party’s loss aversion, so they
are willing to avoid loss by accepting an offer. Being the first to negotiate a price is not the best approach. If you let the other party anchor monetary negotiations, then there is the possibility that you might get lucky. For example, you
might have negotiation experiences where the first offer of the other party is higher than your closing figure. In this instance, if you go first, you would agree on a lower price than you could have acquired. Although Chris recommends letting
the other party go first, he also highlights the importance of withstanding the first offer. If they drive a hard bargain, you have to stand firm. Do not let their first offer lead to you being the one who bends their reality. You should always
establish a range while explaining the evidence underlying your point. Therefore, Chris recommends establishing a ballpark figure with credible references to support your claims. For example, you should reference how people in similar roles
earn between $120,000 and $140,000. This approach increases your chances of success. You are backing your points with evidence and leaving room for the other party to consider an offer around this range. The other party will be less defensive,
as it sounds less like you are telling them what to do. You should always try to offer the other party materials that aren’t important to you, but could be important to them. Doing so will make your offer appear reasonable, even if you are
not giving up much. One way to do this is to pivot to non-monetary terms and ask what factors are crucial for them. Interestingly, arbitrary numbers are generally more likely to be accepted. For example, research suggests that numbers ending
in 0 tend to feel like placeholders that can be bargained down. In contrast, a less rounded number, like $47,845, feels more likely due to a thoughtful calculation. Finally, Chris recommends surprising the other party with a gift. For example,
after a rejection, you can sweeten a shrewd offer by giving them a completely unrelated surprise gift.
</p>
<h2>#7: Create the Illusion of Control</h2>
<p >Chris recommends using calibrated questions to create an illusion of control. For example, negotiators often suggest that the other party is in control by using questions that start with “what” or “how.” A calibrated question helps educate the
other party on the problem, rather than causing conflict by telling them what the problem is. Chris provides a list of calibrated questions he uses in almost every negotiation. The questions are: What about this is important to you? How can
I help make this better for us? How would you like me to proceed? What is it that brought us into this situation? How can we solve this problem? What are we trying to accomplish here? How am I supposed to do that? These questions will make
the other party feel like they are in charge. That said, in reality, you are the one in charge.</p>
<h2>#8: Guarantee Execution</h2>
<p >You can guarantee execution in negotiations through observing body language and tone of voice. You have to use this nonverbal information to adapt to every element of the negotiation. Your aim in the negotiation is to get both consent and execution.
Chris provides various tips for using subtle verbal and nonverbal communication to understand and modify the mental states of the other party: Albert Mehrabian created the 7–38–55 Percent Rule. This rule states that only 7 percent of a message
is based on the words used. 38 percent of the message comes from tone of voice, and 55 percent from body language. Pay close attention to the tone and body language of the other party. Identify if these match the literal meaning of the words
they are trying to convey. If they don’t align, it is apparent that they are lying. The Rule of Three involves getting the other party to agree to the same thing three times in the same conversation. This approach reinforces the chances of
your offer being accepted in the closing negotiation. Chris recommends labeling or summarizing what they said during the initial agreement. This should encourage them to agree for a second time. Then, for the third instance, you could use
a calibrated question. A Harvard Business School study found that, on average, liars use more words than those telling the truth. They also tend to use more third-person pronouns. People often get tired of hearing their names. Switch tracks
and use your name instead. This creates a sense of “forced empathy” and makes the other party see you as human.</p>
<h2>#9: Bargain Hard</h2>
<p >Negotiators use different styles to bargain: they can be analytical, accommodating, or even assertive. Progressive offers can make each style more successful. Suppose the other party is driving a hard bargain. In that case, you should aim to
move the conversation away from monetary issues. For example, Chris encourages readers to use an encouraging voice and ask the other party to put prices aside for a moment. Suggest the other party considers other options that could make this
a good deal for both of you. When bargaining, you always want to prevent confrontation. Collaboration is where you can obtain real bargains. Chris explains that using first-person pronouns (e.g., I) is an excellent way to prevent confrontation.
Using this type of pronoun brings the attention back onto you. You do not want to beg or appear too apologetic during these negotiations, as the issue is the unsolved deal, not you. Take some pressure off the negotiations by bringing the attention
back to help encourage the negotiations. </p>
<h2>Final Summary and Review of Never Split the Difference</h2>
<p >You should never be so eager to solve a conflict that you accept an inconvenient result for you. Making a compromise or accepting a bad deal is almost always a mistake. Chris calls this splitting the difference. Compromising will not always
bring an effective outcome. For example, the other party in a negotiation may provide an offer. Upon compromising, they may suggest you make a further compromise. For example, a kidnapper holding somebody may hold a hostage and ask for ransom
money. This would suggest that money is their motivating factor. That said, there is nothing to say that they won’t also kill this individual as a message after obtaining the money. So Chris suggests you never split the difference. One way
to avoid splitting the difference is to take your time. The other individual might start setting deadlines, but your job is to collect as much information as possible regarding your negotiations. Do not make rushed decisions. Chris explains
that most deadlines are flexible and have simply been chosen randomly. The author provides an example of flexible deadlines from his time working for the FBI. The wife of a Haitian police officer was abducted, and the kidnappers demanded money.
Though, during the following weeks of negotiation, the author noticed an interesting pattern. The kidnappers would insist on receiving ransom money on workdays. Then, as the weekend approached, they would stop their requests and lie low. These
actions led Chris to realize that the kidnappers had a partying habit, and that’s why they needed the money. Once he understood this, the author also realized the deadlines were flexible and that he could negotiate a much lower price with
them. As with most negotiations, information, patience, and time were essential to achieve a successful outcome.
</p>
</div>
</div>
</div>
<a id="click_it" href="#popup1">
</a>
<div id="popup1" >
<div id="popup" >
</div>
</div>
</div>
</body>
</html>