Question

我创建了一个弹出窗口来获取名称，有一个文本字段和一个保存按钮。

用户可以在文本字段中输入其名称，以便输入的名称应显示在"type a name"按钮下方的网页中。

.js文件是，

jQuery(function($) {

    $("a.topopup").click(function() {
            loading(); // loading
            setTimeout(function(){ // then show popup, deley in .5 second
                loadPopup(); // function show popup 
            }, 500); // .5 second
    return false;
    });

    function loading() {
        $("div.loader").show();  
    }
    function closeloading() {
        $("div.loader").fadeOut('normal');  
    }

    var popupStatus = 0; // set value

    function loadPopup() { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup").fadeIn(0500); // fadein popup div         
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { // if value is 1, close popup
            $("#toPopup").fadeOut("normal");  
            $("#backgroundPopup").fadeOut("normal");  
            popupStatus = 0;  // and set value to 0
        }
    }   
});

的CSS。

#backgroundPopup { 
    position: fixed;
    display:none;
    height:100%;
    width:100%; 
}
#toPopup {

    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #ccc;
    display: none;
    font-size: 14px;
    left: 50%;
    margin-left: -402px;
    position: fixed;
    top: 10%;
    width: 250px;
    z-index: 2;
}

html是

<body>
      <a href="#" class="topopup"><button>type a name</button></a>
        <div id="toPopup">       
    <div> 
           <p><label>type a name</label><input type="text" value="" />
          </p>
          <button>save</button>
        </div> 
      </div> 
   </body>

1.输入的文字应显示在按钮<button>type a name</button>下方。

2.Popup框显示为fadding类型，如果我想在显示弹出窗口时删除fadding，该怎么办。

由于

Answer 1

在显示弹出窗口时将fadeIn()更改为show()。我不明白在显示弹出窗口时添加延迟的原因。

$("a.topopup").click(function() {
            loading(); // loading
            setTimeout(function(){ // then show popup, deley in .5 second
                loadPopup(); // function show popup 
            }, 500); // .5 second
    return false;
    });

    function loading() {
        $("div.loader").show();  
    }
    function closeloading() {
        $("div.loader").fadeOut('normal');  
    }

    var popupStatus = 0; // set value

    function loadPopup() { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup").show(); // fadein popup div         
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { // if value is 1, close popup
            $("#toPopup").fadeOut("normal");  
            $("#backgroundPopup").fadeOut("normal");  
            popupStatus = 0;  // and set value to 0
        }
    }

我添加了以下方法，在按钮下面添加输入的文字。

<强>更新

 $("#save").on("click",function(){
        $("a.topopup").after("<br/>" + $("#someId").val());
        $("#toPopup").fadeOut();  // for hiding popup with fade effect. 
    });

我已将id添加到save按钮和文本框中。

<a href="#" class="topopup"><button>type a name</button></a>
        <div id="toPopup">       
    <div> 
           <p><label>type a name</label><input type="text" value="" id="someId" />
          </p>
          <button id="save">save</button>
        </div> 
      </div>

See Demo

Answer 2

为什么不使用jquery对话框？

http://jqueryui.com/dialog

您可以在对话框中追加您想要的内容，例如表单和按钮。

定义表单

var firstselection = true;
var form = $('<div id="form"></div>')
        .html("<div id='example'>"<div id='divSceltaDest' align='center'><input type=text id='input'....
                    .....");

定义按钮

dialbtn = {
    'call' : {
        text : 'What you want',
        click : function() {
            call();
        }
    },
    'cancel' : {
        text : 'Cancel',
        click : function() {
            form.dialog("close");
        }
    }
}

准备对话框并将所有内容关联到单击按钮

form.dialog({
    autoOpen : false,
    title : 'title',
    modal : true,
    width : "auto",
    height : "auto",
    autoResize : true,
    show : "fade",
    hide : "fade",
    position : 'top',
    close : function(ev, ui) {
        //alert('close');
        $(this).remove();
                ...   
    },
    buttons : dialbtn
});

使用jquery创建弹出窗口并执行事件

2 个答案: