Я хочу показать всплывающее окно в этом бинарном древовидном представлении, и при щелчке на каждом узле мне нужно показать детали об узле, используя ajax.Мне нужно только javascript и ajax-код для передачи данных во всплывающее окно.Я уже написал код, но не уверен, что он правильный.Я ищу решение. Мой код всплывающего окна прилагается здесь и проверьте диаграмму, как должно быть представление.Если возникнут дополнительные вопросы, дайте мне знать.Спасибо.
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,ol,ul,li,form,fieldset,legend,label,table,header,footer,nav,section,figure
{
margin:0;
padding:0;
}
html
{
overflow-y:scroll;
}
body
{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:1.6;
color:#5A6064;
}
pre,code
{
tab-size:4;
}
p
{
margin:0 0 11px;
}
ul
{
list-style:disc;
}
ul,ol
{
padding:0;
margin:0 0 11px 25px;
}
li
{
line-height:22px;
margin:0 0 .5em;
}
h1,h2,h3,h4,h5,h6
{
margin:0;
font-weight:400;
text-rendering:optimizelegibility;
color:#282B30;
font-family:Calibri,"PT Sans","Trebuchet MS",'Helvetica Neue',Arial
}
.gc3
{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:50%;
float:left;
padding:1em;
overflow:hidden
}
.grid-c .gc3:nth-of-type(2n+1)
{
clear:left
}
#logo
{
height:150px;
text-align:center;
position:relative;width:100%;
-webkit-user-select:none;
-moz-user-select:none;
padding:0 3em;
margin-left:-3em;
cursor:pointer;
margin-top:50px;
margin-bottom:50px
}
#broken-glass
{
height:100%;
-webkit-tap-highlight-color:transparent;
position:absolute;
left:0;
top:0;
width:100%
}
#logo:active h1
{
top:1px
}
#logo h1
{
margin-top:27px;
font-size:63px;
line-height:1.4;
top:0
}
#logo h1
{
text-align:center;
font-weight:700;
width:100%;
color:#000;
position:absolute;
left:0;
-webkit-user-select:none;
-moz-user-select:none;
cursor:pointer;
}
h2.intro
{
font-size:22px;
line-height:1.2;
font-weight:400;
border:0;
margin-top:0;
}
#header-links
{
font-size:16px;
}
#main-wrapper
{
background:0;
max-width:800px;
width:100%;
margin:2em auto 4em;
padding:3em;
padding-top:0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:relative;
}
.white-popup-block
{
background:#FFF;
padding:20px 30px;
text-align:left;
max-width:650px;
margin:40px auto;
position:relative;
}
#logo-overlay
{
width:100%;
height:75px;
}
#logo-overlay
{
opacity:1;
background:red;
position:absolute;
left:0;
top:0;
opacity:0;
}
#mfp-build-tool
{
background:#FFF;
padding:30px 40px 40px;
max-width:500px;text-align:left;
margin:10px auto;
position:relative;
}
.il
{
color:#099;
}
.mfp-bg
{
top:0;
left:0;
width:100%;
height:100%;
z-index:1042;
overflow:hidden;
position:fixed;
background:#0b0b0b;
opacity:.8;
filter:alpha(opacity=80);
}
.mfp-wrap
{
top:0;
left:0;
width:100%;
height:100%;
z-index:1043;
position:fixed;
outline:0!important;
-webkit-backface-visibility:hidden;
}
.mfp-container
{
text-align:center;
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
padding:0 8px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.mfp-container:before
{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.mfp-align-top .mfp-container:before
{
display:none;
}
.mfp-content
{
position:relative;
display:inline-block;
vertical-align:middle;
margin:0 auto;
text-align:left;
z-index:1045;
}
.mfp-inline-holder .mfp-content,.mfp-ajax-holder .mfp-content
{
width:100%;
cursor:auto;
}
.mfp-ajax-cur
{
cursor:progress;
}
.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close
{
cursor:-moz-zoom-out;
cursor:-webkit-zoom-out;
cursor:zoom-out;
}
.mfp-zoom
{
cursor:pointer;
cursor:-webkit-zoom-in;
cursor:-moz-zoom-in;
cursor:zoom-in;
}
.mfp-auto-cursor .mfp-content
{
cursor:auto;
}
.mfp-close,.mfp-arrow,.mfp-preloader,.mfp-counter
{
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
.mfp-loading.mfp-figure
{
display:none;
}
.mfp-hide
{
display:none!important;
}
.mfp-preloader
{
color:#ccc;
position:absolute;
top:50%;
width:auto;
text-align:center;
margin-top:-.8em;
left:8px;
right:8px;
z-index:1044;
}
.mfp-preloader a
{
color:#ccc;
}
.mfp-preloader a:hover
{
color:#fff;
}
.mfp-s-ready .mfp-preloader
{
display:none;
}
.mfp-s-error .mfp-content
{
display:none;
}
button.mfp-close,button.mfp-arrow
{
overflow:visible;
cursor:pointer;
background:transparent;
border:0;
-webkit-appearance:none;
display:block;
outline:0;
padding:0;
z-index:1046;
-webkit-box-shadow:none;
box-shadow:none;
}
button::-moz-focus-inner
{
padding:0;
border:0;
}
.mfp-close
{
width:44px;
height:44px;
line-height:44px;
position:absolute;
right:0;
top:0;
text-decoration:none;
text-align:center;
opacity:.65;
padding:0 0 18px 10px;
color:#fff;
font-style:normal;
font-size:28px;
font-family:Arial,Baskerville,monospace;
}
.mfp-close:hover,.mfp-close:focus
{
opacity:1;
}
.mfp-close:active
{
top:1px;
}
.mfp-close-btn-in .mfp-close
{
color:#333;
}
<body>
<div class="example gc3">
<h3>Popup For Details</h3>
<div class="html-code">
<!-- link that opens popup -->
<a class="popup-with-form" href="#test-form">Click Here</a>
<!-- form itself -->
<form id="test-form" class="mfp-hide white-popup-block">
<h1>Details</h1>
<fieldset style="border:0;">
<ol>
<li>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Name" required>
</li>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="example@domain.com" required>
</li>
<li>
<label for="ID">Id No</label>
<input id="ID" name="ID" type="ID" placeholder="Eg. 0001" required>
</li>
</ol>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-with-form').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
callbacks: {
beforeOpen: function() {
if($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
}
}
});
});
$(document).ready(function() {
$('.simple-ajax-popup-align-top').magnificPopup({
type: 'ajax',
alignTop: true,
overflowY: 'scroll'
});
$('.simple-ajax-popup').magnificPopup({
type: 'ajax'
});
$.ajax({
type: "POST",
url:
data:{name:$("#name_new").val(),Email:$("#email_new").val(),ID:$("ID_new").val()},
success: function(){
$(this).hide();
$('div.success').fadeIn();
}
}
});
</script>
</body>
enter code here