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

【问题标题】：create popup window using jquery and doing an event使用 jquery 创建弹出窗口并执行事件
【发布时间】：2013-04-29 10:41:56
【问题描述】：

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

用户可以在文本字段中输入他们的名字，这样输入的名字就会显示在网页中"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.弹出框显示为fadding类型，如果我想在显示popup时去除fading，怎么办。

谢谢

【问题讨论】：

您能否提供有关代码的更多信息，因为未定义带有#backgroundPopup id 的 div。另外，你能在 jsFiddle 上复制代码吗？

标签： javascript jquery html css

【解决方案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. 
    });

我还向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>

See Demo

【讨论】：

你的演示很好。点击保存按钮后弹出仍然可见状态，如何使该弹出消失。
如果你想要淡入淡出效果，只需在save点击处理程序中调用$("#toPopup").fadeOut();，否则调用$("#toPopup").hide();。
回滚编辑，因为它太激进了，不应该被批准。
嗨，点击保存按钮时，值显示在屏幕上，但弹出窗口没有消失，我知道如何实现]
您好，您的答案在小提琴中运行良好，但在我的项目中实施时没有任何效果，是否需要包含任何内容，

【解决方案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
});

【讨论】：