我有3种不同类型的模式窗口来处理不同的事件。它们弹出以处理以下任一项:
1) 警告,即"嘿,如果你离开页面,你将失去你的工作"之类的信息。
2) 来自用户先前填写的表单的动态数据,即"您将使用DataX:DataX、DataY:DataY创建页面,日期:2012年3月28日。
3) 供用户填写的表格。
我最初试图用一组html/css/javascript来处理以上三种场景,只是根据情况传递数据和修改div。随着我对事物的扩展,我注意到事物更难在不马虎的情况下保持干净。我有几个问题,我会在了解现在的情况后列出。
模式弹出窗口的简化HTML:
<div id ="popup" style="display:none;">
<div class="modal-container">
<div class="modal">
<div class="modal-header">
<a class="close" href="# " title="Press Esc to close"><div id="close-label" title="Press Esc to close">Close</div></a>
<span id="top-header">WARNING</span>
</div>
<div class="modal-body">
<div class="modal-subhead">
<img class="subhead-icon" border="0" src="">
<span id= "header">WARNING</span>
</div>
<div class="modal-message"><span>If you leave this page, you will lose unsaved changed.</span></div>
<div class="modal-input-first">
<div class="modal-label"></div>
<div id="modal-input"></div>
</div>
<div class="modal-input-second">
<div class="modal-label"></div>
<div id="modal-input"></div>
</div>
<div class="modal-footer">
<a class="secondary" href="#">Cancel</a>
<span id = "button-secondary-label">or</span>
<span class="btn_container">
<span class="btn_left"></span>
<span class="btn_center">Continue</span>
<span class="btn_right"></span>
</span>
</div>
</div>
现在,它位于一个单独的文件中,包含css和javascript,并在加载页面时加载。
在主文件中,我根据触发弹出窗口的内容更改弹出窗口,只需使用jquery即可:
$('.modal-message').html('New Message');
$('.modal-subhead #header').text('New header');
在第一次发出获取数据的ajax请求之后,类似地填充动态数据。
正如我所说,随着事情的发展,我不得不改变很多,这开始让人觉得草率。尤其是当我不得不对各个元素的css进行像素完美的更改时。最好有3个完全独立的html集来处理这些吗?对于这个人来说,哪里是最好的居住场所,是单独归档的方法吗?
在某些情况下,我需要特定的元素,所以继续添加单独的元素更好吗?比如:
<div class="modal-input-specific-thing">
<div class="modal-label"></div>
<div id="modal-input"></div>
<div id="modal-input-2"></div>
</div>
或者使用jquery来动态更改html的结构?
var new_input="模态输入"+计数;$('#modal input').attr('id',new_input);
有没有更好的方法只将需要的元素推送到这样的弹出窗口
如果我有10-12个场景,这是可能的,因为我一直在扩展。每次加载页面时解析12个不同的html/css集与我现在尝试做的事情相比,是否有足够大的性能打击。。。制作一个通用/抽象的弹出窗口,并根据用户需要向其推送元素/数据
谢谢!
我应该用jQuery和jQuery UI来实现这一点。jQuery UI有一个非常好的弹出功能,叫做对话框。(http://jqueryui.com/demos/dialog/)
一个重建你的处境的工作版本,你会在这里看到。(http://jsfiddle.net/7GVmz/)
你可以添加很多选项,比如按钮、打开和关闭时的回调。您可以在jqueryui网站(http://jqueryui.com/demos/dialog/#option-禁用)
Html
<div id="popup-1" title="popup-1">
Hello World
</div>
<div id="popup-2" title="popup-2">
Hello World
</div>
<div id="popup-3" title="popup-3">
Hello World
</div>
JS
$(document).ready(function() {
$('#popup-1').dialog();
$('#popup-2').dialog();
$('#popup-3').dialog();
});
备注
加载jquery库和jquery ui库非常重要。
我所有的JavaScript警报都使用SweetAlert,它是一个比默认值更好的JavaScript弹出框,使用起来非常简单。
swal({<br>
title: "Are you sure you want to leave?",<br>
text: "You have unsaved changes!",<br>
type: "warning",<br>
showCancelButton: true,<br>
confirmButtonClass: "btn-danger",<br>
confirmButtonText: "Yes, Exit!",<br>
closeOnConfirm: false<br>
},<br>
function(){<br>
swal("Deleted!", "Your imaginary file has been deleted.", "success");<br>
});<br>
完整的教程在这里-https://kodesmart.com/kode/javascript-replacement-alert-box