Pop Up dialog doesn't work on Web Player Tibco Spotfire X

[Jacopo Truosolo]

Hi all,

I developed a procedure inspired by this link:

https://codepen.io/imprakash/pen/GgNMXO

The above code allows you to make a pop up dialog based on a button click. This procedure works perfectly on the Spotfire 7.13 version (both Web Player and Analyst) instead on the Spotfire X it works only on the Analyst and not from the Web.

Below the error message:

 

 

 

could you help me

Below the HTML/CSS code:

 

 

Let me Pop up

 

 

 

 

Here i am

×

 

Thank to pop me out of that button, but now i'm done so you can close this window.

 

 

 

 

body {

font-family: Arial, sans-serif;

background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;

background-size: cover;

height: 100vh;

}

 

h1 {

text-align: center;

font-family: Tahoma, Arial, sans-serif;

color: #06D85F;

margin: 80px 0;

}

 

.box {

width: 40%;

margin: 0 auto;

background: rgba(255,255,255,0.2);

padding: 35px;

border: 2px solid #fff;

border-radius: 20px/50px;

background-clip: padding-box;

text-align: center;

}

 

.button {

font-size: 1em;

padding: 10px;

color: #fff;

border: 2px solid #06D85F;

border-radius: 20px/50px;

text-decoration: none;

cursor: pointer;

transition: all 0.3s ease-out;

}

.button:hover {

background: #06D85F;

}

 

.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 h2 {

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;

}

 

@media screen and (max-width: 700px){

.box{

width: 70%;

}

.popup{

width: 70%;

}

}

Regards

[Shandilya Peddi]

Check this knowledge base article for a possible workaround

https://support.tibco.com/s/article/Anchor-links-do-not-work-in-text-are...

[Jacopo Truosolo]

Unfortunately it doesn't work..

[Alexander Lach 3]

Hey Jacopo,Did you ever find a solution to thisMy team is upgrading to Spotfire X and I'm having the same issue!Cheers,

Alex

[Shandilya Peddi]

You can make the following changes to make this work by usingclick events rather than relying on url fragments,

1. Change the CSS from ".overlay:target " to ".overlay.target "

2. Use the below JavaScript to add the class or remove the class as needed.

$( document ).ready(function() {

$(".close").on("click", function() {

$(".target").removeClass("target");

return false;

});

 

$("#all").find('a').each(function() {

var $this = $(this);

var _href = $this.attr("href");

$this.on("click", function() {

$(_href).addClass("target");

return false;

});

});

});