Javascript 在下拉搜索中无法生成pop_Javascript_C#_Jquery_Ajax_Model View Controller

Javascript 在下拉搜索中无法生成pop

javascript c# jquery ajax model-view-controller

Javascript 在下拉搜索中无法生成pop,javascript,c#,jquery,ajax,model-view-controller,Javascript,C#,Jquery,Ajax,Model View Controller,我可以在浏览器上看到名为div的弹出div被命名为#SpeakerPopup 但是我看不到弹出窗口 function GetSelectedSpeakerData(val) { $.ajax({ type: "POST", dataType: "json", url: "/NewConference/getSearchedSpeaker", data: { "name": val }, success:

我可以在浏览器上看到名为div的弹出div被命名为#SpeakerPopup 但是我看不到弹出窗口

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);
         }
    });
}


吉姆·沃克博士
亚洲经济体著名经济学家、创始人兼董事总经理
“第三次世界大战”
（2月21日星期二上午8:30在Golconda）






你好
你好
“第三次世界大战”
嗨
tttddd

这纯粹是

css

问题。我在

popup

div#SpeakerPopup

上看到

mfp hide

类，它基本上可能有一些属性

在CSS
中显示：none

。因此，我建议在

GetSelectedSpeakerData（val）

ajax success

的末尾添加

$（“#speakerpop”）.show（）

。也可以只替换下面的行

<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>

仅仅

$("#Details").empty();
$("#Details").append(SpeakData);
$("#Tabcontent").empty();
$("#Tabcontent").append(Speaktopic);
$("#Menutabs").empty();
$("#Menutabs").append(Speaktab);

在这些代码的末尾，您可以添加

$（“#SpeakerPopup”）.show（）

PS-似乎您一直在使用

twitter bootstrap

框架进行响应性设计。如果是这样，您可以尝试使用

bootstrap modals

优雅地实现这一点

希望这有帮助。

谢谢。每个问题都与css本身有关。随时。。快乐编码。。是的。。如果这对你有帮助，请投票并将其标记为答案：）

<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>

$("#Details").empty();
$("#Details").append(SpeakData);
$("#Tabcontent").empty();
$("#Tabcontent").append(Speaktopic);
$("#Menutabs").empty();
$("#Menutabs").append(Speaktab);

$("#Details").html(SpeakData);
$("#Tabcontent").html(Speaktopic);
$("#Menutabs").html(Speaktab);