The default settings prevent window.open (pop-ups blocked) from opening

I've been working on adding a share link for my website and I came up with the following code:

function handleFacebook(shortURL) {
  $(".facebook").click(function(e) {
    e.preventDefault();
      window.open(
        'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(shortURL),
        'facebook-share-dialog',
        'width=626,height=436');
      return false;
    });
  });
}

In my HTML (JADE), I have:

  div.facebook
    img(src="/images/facebook_logo.png")

Unfortunately, this code doesn't work when popups are blocked.

Does anyone know how to solve the popup blocking issue?

I'm not sure what changes need to be made or where to add them. Any suggestions?

jqueryhtmlcss

Answer №1

Do you need to add multiple share links, but are concerned about browser popup blockers? Including window.open in the link's href will prevent this issue.

To ensure all links have window.open in their href, follow this example:

Example: FIDDLE

var url = ['http://google.com', 'http://bing.com', 'http://duckduckgo.com/'];

$.each(url, function(i, val){

    $('body').append('<div><a href="#" onclick="window.open(\'https://www.facebook.com/sharer/sharer.php?u=\'+encodeURIComponent(\''+val+'\'), \'facebook-share-dialog\', \'width=626,height=436\'); return false;"> Share on Facebook </a></div>');

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experienced an unexpected setback with the absence of the right-click capability on a Javascript-powered hyperlink, specialized for

I am facing an issue with a hyperlink on my website. This particular hyperlink submits a hidden form using the POST method to redirect users to another site. However, when someone right-clicks on this hyperlink and tries to open it in a new tab, they are o ...

javascripthtmlhyperlink

I want to hide jqvmap when viewing on mobile devices

I'm currently working on my website at . I have a template that I'm using as a guide, but I want to make the map disappear on mobile view and replace it with a dropdown list. Can anyone suggest what code I should use for this? Appreciate any hel ...

javascripthtmlcssresponsive-designjqvmap

Solving Problems with D3 Bar Charts

I currently have a database structured with 5 columns: ID, customerName, dateYear, dateMonth, and dateDay. The date information is added to the database when a user submits a form. For example, if a user submits a form today, the 3 date columns would refle ...

javascriptphphtmlmysqld3.js

Firefox presents a compact box positioned between the images

When attempting to use flags as a way to switch between languages, I encountered an issue in Firefox where a small box appears between the images on the Hebrew site. In Chrome, everything works fine. I implemented the following code: <div class="flags ...

csshtml

Clear information upon clicking to switch to a new controller

I have a scenario where one div contains another div. The contained div has its own controller that controls its visibility based on a variable changed by clicking an icon button in the container. The structure is as follows: <div ng-controller="BarCo ...

javascriptjqueryangularjsng-tags-input

Discrepancy in the vertical pattern repetition of the SVG background

When I use a simple div with an SVG set as a background image with vertical repeat, I noticed a gap of varying sizes on Chrome and Firefox depending on the screen size (please resize the window). Check out the issue here .bg { width: 50%; height: 2 ...

htmlcsssvg

lengthy conditional statement in JavaScript

Is there a more efficient way to handle a long series of if-else statements in JavaScript? I'm not experienced enough with the language to optimize this code. Any suggestions or guidance would be greatly appreciated. $('#webform-component-primar ...

javascriptjqueryif-statementrefactoring

The Bootstrap dropdown menu unexpectedly appears in front of the panel located above

Having trouble with the Bootstrap dropdown panel. My web page has 4 main panels, each containing additional bootstrap panels. When I open one panel at a time, everything works fine. However, when I try to open multiple panels simultaneously, the positions ...

htmlcssheightdropdownbootstrap-4

What is the best way to resize dynamically according to the text content?

Currently working on a Rails3 + jQuery project that involves integrating Facebox. Encountering an issue where the title text in Facebox is too large for a single line, causing it to spread across two lines and look unattractive. I'm curious if there& ...

jquerycssfacebox

What is the best way to achieve consistent width in a material-ui card component?

How can I ensure that all these cards have the same width? https://i.stack.imgur.com/Ns3zw.png I'm experiencing an issue with achieving uniform card widths when using flexbox in material-ui. How can I resolve this? Is it necessary to utilize Grid fo ...

cssreactjsflexboxmaterial-ui

Error: The function $(...).offset(...) is not defined

I'm encountering an issue that states Error: $(...).offset(...) is not defined. and it's highlighting the $ symbol. I've searched for solutions to this error message, but unfortunately haven't found one yet. Below is my jQuery cod ...

jquery

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

I'm encountering an issue with a pop-up video player that is triggered by an "onClick" event in HTML elements. The problem arises when there are multiple video players on the same page - in Firefox, the first video loads at the bottom of the page, req ...

javascriptcsspopup

Receive real-time updates on incoming messages in your inbox

I'm seeking advice on implementing live update messages in my code. Here's what I have so far: <script> function fetch_messages(){ var user_id = "1" // example id $.ajax({ url: "do_fetch.php", t ...

phpjavascriptjqueryajax

Creating multiple route::put requests within a single controller in Laravel 6

I am trying to create two Route::put methods in my controller, but I am encountering errors while doing so. The error message I am receiving is: Facade\Ignition\Exceptions\ViewException Route [home.callqueue] not defined. (View: C:&bs ...

phphtmllaravel

What is the method to retrieve this content using PHP's Simple HTML dom parser?

If I have the following HTML snippet in an HTML document: <div class="info"> <p><span class="strong">Score</span>4.32/5</p> <p><span class="strong">Type</span>TV</p> <p><span class ...

phphtmlweb-scrapingsimple-html-dom

Within the HTMLDivElement.drop, the parent element now encapsulates the new child element

I've encountered a DOM exception that has me stuck. My issue involves div elements and a button - when the user clicks the button, a random div is selected and another div with a background-color class is appended to it. Essentially, clicking the butt ...

javascripthtmlcssdrag-and-drop

Unable to set the value of an HTML date field using Selenium on mobile devices

I am facing a challenge in setting the value of a date field on an HTML page using Selenium. The date field on the page is structured like this: <input aria-invalid="false" id="datepicker-date-input" type="date" min="2 ...

javahtmlseleniumdatemobile

Remove checkbox in a selected option of a dropdown menu using JQuery

I apologize for the unusual title. Here's what I'm looking for: I have a dropdown menu with several options, and two of them are labeled as "special". If one of these special options is selected, three checkboxes should be disabled or hidden. B ...

jquerycheckboxdrop-down-menuhide

What is the best way to display the ID value as a variable in a bootstrap modal dialog?

I originally thought figuring this out would be a breeze, but it's proving to be quite the challenge. After scouring for solutions without success, I find myself stuck. There's a list of dynamically generated buttons with unique id values that I ...

javascriptphpjquerytwitter-bootstrapbootstrap-modal

What is the best way to link to a CSS file located in a different directory while being in a subdirectory?

For a project I am working on, I am developing a simple streaming site and have organized my files into different folders. These folders include: HTML CSS Shows Within the "Shows" folder, there is a subfolder named "Testshow". I am facing an issue with ...

htmlcssdirectory