@{
ViewBag.Title = "iifl_conference";
Layout = "/Views/Shared/_ConferenceLayout.cshtml";
}
@model IIFLWeb.Models.Parents.EventsParent
@section Conference
{
<div class="search-ac-list">
@Html.DropDownList("ddlSpeaker", Model.lstSpeakerData, "Select Speaker", new { @onchange = "GetSearchedSpeakerData(this)", @class = "select2" })
</div>
}
主要问题是我无法在搜索中生成弹出窗口
function GetSearchedSpeakerData(val) {
var selectedSpeaker = val.value;
$.ajax({
type: "POST",
dataType: "json",
url: "/NewConference/getSearchedSpeaker",
data: {"name": selectedSpeaker },
success: function (result) {
var SpeakData = '';
$.each(result, function (i, val) {
var SpeakerName = '';
SpeakData += ' <li>';
SpeakData += '<a href="#SpeakerPopup" onclick="GetSelectedSpeakerData(\'' + val.Name + '\');" data-effect="mfp-zoom-in" id="SpeakerDetails" class="open-popup-link popup-block">';
SpeakData += '<div class="height240">';
SpeakData += '<div class="circle-img">';
if(val.Name=="Panel Discussions")
{
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/' + val.ImageUrl + ' " alt="Panel Discussions "/>';
}
else
{
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/' + val.ImageUrl + ' " alt="'+val.Name+'"/>';
}
SpeakData += '</div>';
SpeakData += '<h4>'+val.Title +'</h4>';
SpeakData += '<label class="speaker-date">';
SpeakData += +val.TimeSlot + ", " + val.Venue + " at "+val.SpeakerDate ;
SpeakData += ' </label>';
SpeakData += '</div>';
SpeakData += '<div class="speaker-bx">';
SpeakData += '<h3 id="SpeakerName">' + val.Name + '</h3>';
SpeakData += '<h4>' + val.Designation + '</h4>';
SpeakData += '</div>';
SpeakData += '</a>';
SpeakData += '</li>';
});
$("#UlProfileList ").empty();
$("#UlProfileList").append(SpeakData);
}
});
}
我从dropdownlist获取名称，并从名为GetSearchedSpeakerData(val)的Ajax函数名称中获取名称，我得到了div
现在OnClick该特定Div需要生成Popup，因为我正在使用另一个名为GetSelectedSpeakerData(val)的Ajax函数名称，此函数是创建的，以便选择特定的div我在该名称值上获得“name”值，并从ajax函数GetSelectedSpeakerData(val)创建弹出窗口。
function GetSelectedSpeakerData(val) {
$.ajax({
type: "POST",
dataType: "json",
url: "/NewConference/getSearchedSpeaker",
data: { "name": val },
success: function (result) {
var SpeakData = '';
var Speaktopic='';
var Speaktab='';
$.each(result, function (i, val) {
var SpeakerName = '' ;
SpeakData += ' <div class="col-sm-3">';
SpeakData += ' <div class="circle-img">';
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/'+ val.ImageUrl+ ' " alt=" '+val.Name+ '"/>';
SpeakData += '</div>';
SpeakData += '</div>';
SpeakData += '<div class="col-sm-9">';
if(val.Name=="Panel Discussions")
{
SpeakData += '<h3>Panel Discussion</h3>';
}
else
{
SpeakData += '<h3>'+val.Name+'</h3>';
}
SpeakData += '<h5>'+val.Designation+'</h5>';
SpeakData += '<h4>' + val.Title + '</h4>';
if(@Html.Raw(Json.Encode(ViewBag.IsVenue)) == true)
{
SpeakData += '<label class="speaker-date"> ( ' + val.SpeakerDate + ", " + val.TimeSlot + " at " + val.Venue + ')</label>';
}
SpeakData +='</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane active" id="Tab1-1">' + val.Description + '</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-2">' + val.CompanyDesc + '</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-3">';
Speaktopic += '<h4>' + val.Title + '</h4>';
Speaktopic += val.Topic +'</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-4">';
Speaktopic += '<video controls class="VideoPlayer">';
Speaktopic +='<source src="http://www.iiflcap.com/IPad/Conference/Videos/2017/'+val.VideoUrl+'" type="video/mp4"></video></div>';
if (val.Description != "")
{
Speaktab += '<li role="presentation" class="active">';
Speaktab +=' <a href="#Tab1-1" aria-controls="Tab1-1" role="tab" data-toggle="tab">Profile</a>';
Speaktab +=' </li>';
}
if (val.CompanyDesc != "")
{
Speaktab +='<li role="presentation" >';
Speaktab +=' <a href="#Tab1-2" aria-controls="Tab1-2" role="tab" data-toggle="tab">Company</a>';
Speaktab +=' </li>';
}
if(val.Topic != "")
{
Speaktab +=' <li role="presentation">';
Speaktab +='<a href="#Tab1-3" aria-controls="Tab1-3" role="tab" data-toggle="tab">Topic</a></li>';
Speaktab +='</li>';
}
if(val.VideoUrl != "")
{
Speaktab +=' <li role="presentation">';
Speaktab += '<a href="#Tab1-4" aria-controls="Tab1-4" role="tab" data-toggle="tab">Video</a></li>';
Speaktab += '</li>';
}
});
$("#Details").empty();
$("#Details").append(SpeakData);
$("#Tabcontent").empty();
$("#Tabcontent").append(Speaktopic);
$("#Menutabs").empty();
$("#Menutabs").append(Speaktab);
}
});
}
我可以在浏览器上看到名为div的popup div命名为#SpeakerPopup 但我看不到弹出窗口
<div id="SpeakerPopup" class="white-popup mfp-with-anim mfp-hide">
<div id = "Details" class="row">
<div class="col-sm-3">
<div class="circle-img">
<img src="resources/images/speakers/1.jpg"/>
</div>
</div>
<div class="col-sm-9">
<h3>Dr. Jim Walker</h3>
<h5>Renowned economist, Founder and Managing Director, Asianomic</h5>
<h4>"World War Three"</h4>
<label class="speaker-date">(Tuesday, 21 February, 8:30am at Golconda)</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<ul id="Menutabs" class="nav nav-tabs Border-0 popuptabs" role="tablist">
<li role="presentation"><a href="#Tab1-1" aria-controls="Tab1-1" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation" class="active"><a href="#Tab1-2" aria-controls="Tab1-2" role="tab" data-toggle="tab">Company</a></li>
<li role="presentation"><a href="#Tab1-3" aria-controls="Tab1-3" role="tab" data-toggle="tab">Topic</a></li>
<li role="presentation"><a href="#Tab1-4" aria-controls="Tab1-4" role="tab" data-toggle="tab">Video</a></li>
</ul>
<div id="Tabcontent" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Tab1-1">
<p>hello </p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-2">
<p>HEllo</p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-3">
<h4>"World War Three"</h4>
<p>hi </p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-4">tttddd
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
这纯粹是css问题。我在mfp-hide - popup上看到div#SpeakerPopup课程，基本上可能在display:none中有一些属性CSS。所以我建议的是，只需在$("#SpeakerPopup").show() GetSelectedSpeakerData(val)的末尾添加ajax-success即可。你也可以直接替换下面的行
$("#Details").empty();
$("#Details").append(SpeakData);
$("#Tabcontent").empty();
$("#Tabcontent").append(Speaktopic);
$("#Menutabs").empty();
$("#Menutabs").append(Speaktab);
只是
$("#Details").html(SpeakData);
$("#Tabcontent").html(Speaktopic);
$("#Menutabs").html(Speaktab);
在这些结尾处，您可以添加$("#SpeakerPopup").show()。
PS - 似乎您一直在使用twitter-bootstrap框架进行响应式设计。如果是这样，您可以尝试使用bootstrap-modals来实现这一目标。
希望这有帮助。