javascript 使用 jquery 创建弹出窗口并执行事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16276617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
create popup window using jquery and doing an event
提问by user2086641
I have created a popup window to get the name,having a text field and a save button.
我创建了一个弹出窗口来获取名称，有一个文本字段和一个保存按钮。
User can type their name in the text field so that the entered name should be displayed in the webpage below the "type a name"button.
用户可以在文本字段中键入他们的姓名，以便输入的姓名应显示在"type a name"按钮下方的网页中。
.js file is,
.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.
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 is
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.The entered text should be displayed below the button<button>type a name</button>.
1.输入的文字应显示在按钮下方<button>type a name</button>。
2.Popup box is displaying in fadding type,if i want to remove fadding while displaying popup,how to do.
2.弹出框以渐变类型显示，如果我想在显示弹出窗口时去除渐变，该怎么做。
Thanks
谢谢
采纳答案by SachinGutte
Change fadeIn()to show()while displaying popup. I don't understand reason for adding delay while showing popup though.
显示弹出窗口时更改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
}
}
I've added following method, that adds entered text below the button.
我添加了以下方法，即在按钮下方添加输入的文本。
UPDATE
更新
$("#save").on("click",function(){
$("a.topopup").after("<br/>" + $("#someId").val());
$("#toPopup").fadeOut(); // for hiding popup with fade effect.
});
I've added id's to savebutton and text box also.
我还向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>
回答by nfrignani
Why don't you use jquery dialog?
你为什么不使用 jquery 对话框？
You can append to dialog what you want, for example forms and buttons.
您可以将所需的内容附加到对话框中，例如表单和按钮。
define form
定义形式
var firstselection = true;
var form = $('<div id="form"></div>')
.html("<div id='example'>"<div id='divSceltaDest' align='center'><input type=text id='input'....
.....");
define buttons
定义按钮
dialbtn = {
'call' : {
text : 'What you want',
click : function() {
call();
}
},
'cancel' : {
text : 'Cancel',
click : function() {
form.dialog("close");
}
}
}
Prepare the dialog and associate all to a click button
准备对话框并将所有内容关联到单击按钮
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
});
