0

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

用户可以在文本字段中输入他们的姓名，以便输入的姓名应显示在"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.弹出框以渐变方式显示，如果我想在显示弹出时删除渐变，怎么办。

谢谢

4

2 回答 2

0

显示弹出窗口时更改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. 
    });

我save还在按钮和文本框中添加了 ID。

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

看演示

于 2013-04-29T10:48:59.983 回答
0

为什么不使用 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
});
于 2013-04-29T11:02:11.797 回答