Spotfire problem related to popup, the popup disappear while moving to write from input to another

[Ghada Abbes]

Hello

I need to make a form in a popup, I need twopriority Controls (inputs fields) with a button. But my problem while moving to input to another to write the popup disappear ! I added this code for the popup with javascript.

var $div = $("#" + id);

var css = "

.sf-element-bookmark-capture{

visibility: hidden;

}

.error {

color: red;

}

.succes {

color: green;

}

 

table.overview {

width:100%;

}

 

table tr td.title {

font-size: 22px;

font-weight: bold;

text-align: center;

}

 

table tr td.subtitle {

font-size: 12px;

font-style: italic;

color: #999;

text-align: center;

}

 

table tr td.logo {

width: 175px;

height: 75px;

text-align: center;

}

 

.Popup {

display: none;

position: fixed;

font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif;

font-size: 11px;

z-index: 1; /* Sit on top */

padding-top: 100px; /* Location of the box */

left: 0;

top: 0;

right: 0;

bottom: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

/*overflow: auto; */ /* Enable scroll if needed */

overflow-y: auto;

background: rgba(0,0,0,0.8);

/*background-color: rgb(0,0,0);*/ /* Fallback color */

/*background-color: rgba(0,0,0,0.4);*/ /* Black w/ opacity */

}

 

.PopupContent {

width: 500px;

background: #FFFFFF;

margin: 5% auto; /* 5% from the top and centered */

padding: 5px 20px 13px 20px;

border-radius: 10px;

border: 1px solid #888;

}

 

.PopupOpen {

}

 

.PopupClose {

background: #606061;

line-height: 25px;

position: relative;

text-align: center;

text-decoration: none;

color: #fff;

float: right;

font-size: 28px;

font-weight: bold;

right: -12px;

top: -10px;

width: 24px;

border-radius: 12px;

vertical-align: middle;

box-shadow: 1px 1px 3px #000;

}

 

.PopupOpen:hover,

.PopupClose:hover,

.PopupClose:focus {

color: #00d9ff;

text-decoration: none;

cursor: pointer;

} ";

$("").text(css).appendTo($div);

 

var modal = null;

 

$(".PopupOpen").click(function(e){

e.preventDefault();

modal=document.getElementById(this.getAttribute('popupId'));

modal.style.display="block";

});

$(".PopupClose").click(function() {

modal.style.display = "none";

});

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

}

}

WITH the parameter id and valuestyle-container

in the html :

 

 

Anyone face the same problem can help me. Thanks