Jquery 尝试动态创建模式并执行自定义脚本失败

首先，当我将数据和代码附加到包装器中时，它不会显示非常特殊的代码。当我用visualstudios快速观看时。最后，它根本不会显示模态

代码：

var wrapper = $("<div>");
var data = $("<select>");
data.append('<option value = "17">Asset Name Read Only</option>').append('<option value = "18">Asset Type</option>').append('<option value = "19">Asset Code Read Only</option>').append('<option value = "20">Asset Parent</option>').append('<option value = "21">Asset Parent All</option>').append('<option value = "22">Asset Name Editable</option>').append('<option value = "23">Asset Code Editable</option>')
var code = $("<script>").attr("type", "text/javascript").html('$(".modal select option").click(function(){$(SELECTED_ELEMENT).attr("elType", $(this).val());});');
wrapper.append(data).append(code);
parent.showOverlay();
parent.showModal(wrapper);

var包装器=$（“”）；
变量数据=$（“”）；
数据。追加（“资产名称只读”）。追加（“资产类型”）。追加（“资产代码只读”）。追加（“资产父项”）。追加（“资产父项全部”）。追加（“资产名称可编辑”）。追加（“资产代码可编辑”）
var code=$（“”）.attr（“type”，“text/javascript”）.html（'$（“.modal select option”）。单击（function（）{$（SELECTED_元素）.attr（“elType”，“$（this.val（））；}）；）；
append（数据）.append（代码）；
parent.showOverlay（）；
parent.showModal（包装器）；

上述语句“parent.showmodel（wrapper）”如下所示：

function showModal(data){
  $("<div class = 'modal'>").css({
      top: $(window).height() / 2 - $("div.modal").height() / 2,
      left: $(window).width() / 2 - $("div.modal").width() / 2
  }).append(data).fadeIn();
}

函数showmodel（数据）{
$（“”）.css({
顶部：$（窗口）.height（）/2-$（“div.model”）.height（）/2，
左：$（窗口）.width（）/2-$（“div.modal”）.width（）/2
}).append（data.fadeIn（）；
}

我不太清楚在模态没有显示的意义上发生了什么，也不清楚为什么javascript被附加到包装器div。我做错了什么？

没有需要显示的appendTo（“body”）

至于脚本，不要将脚本发送到函数，只发送HTML，因为它可以工作，然后在行之后如下所示：

parent.showModal（包装器）； 查找（“选项”）。单击（函数（）{ //在这里插入代码

---

});

您应该使用插件制作，下面是简单的代码

(function($){
    $.fn.modal = function(){
      //append div to body
     $("<div />").appendTo('body').attr("id","modal").css({width: 200, height:120, background-color:'red', position:'absolute', display:'none'});
    win_width = $(window).width(); //get the width of window
    win_height = $(window).height();
    mod_width = $('#modal').width();
    mod_height = $('#modal').height();
    //calculate values to center the modal
    m_top = (win_height / 2) - (mod_height / 2);
    m_left = (win_width / 2) - (mod_width / 2);
    //center modal
    $("#modal").css({top: m_top, left: m_left});
    $("#modal").fadeIn();
    }
})(jQuery);

（函数（$）{
$.fn.modal=函数（）{
//将div追加到正文
$（“”）.appendTo（'body'）.attr（“id”，“modal”）.css（{宽度：200，高度：120，背景色：红色，位置：绝对，显示：无]）；
win_width=$（window.width（）；//获取窗口的宽度
win_height=$（window.height（）；
mod#width=$（'#modal'）.width（）；
mod#height=$（“#modal”）.height（）；
//计算值以使模态居中
m_top=（win_height/2）-（mod_height/2）；
m_left=（赢得宽度/2）-（模块宽度/2）；
//中心模态
$（“#模态”）.css（{top:m#top，left:m#left}）；
$（“#模态”）.fadeIn（）；
}
})（jQuery）；

请务必打电话

<button id = 'button'>CLick me</button> // html button
$('#button').modal(); // call plugin in js

单击我//html按钮
$（“#按钮”）.modal（）；//js中的调用插件

我正在用jsfiddle.net尝试这个方法，看看是否可以让它工作。你能用它做个演示吗？我正试图调整你的代码，虽然我很喜欢你的方向