javascript - 需要许多不同的弹出窗口；使用一个抽象的弹出窗口来处理每个场景是否更好

Question

我有 3 种不同类型的模态窗口来处理不同的事件。他们弹出来处理:

1) 警告，即“嘿，如果你离开页面，你将失去你的工作”之类的消息。

2) 来自用户先前填写的表单的动态数据，即“您将要创建一个页面，其中包含 DataX:Data X，DataY:DataY，日期:2012 年 3 月 28 日。

3) 供用户填写的表格。

我本来是想用一组html/css/javascript来处理上述所有3种情况，只是根据情况传入数据和修改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' + count; $('#modal-input').attr('id', new_input);

是否有更好的方法来仅将需要的元素推送到像这样的弹出窗口？

如果我有 10-12 个场景，随着我不断扩展，这是可能的。每次加载页面时解析 12 组不同的 html/css 与做我现在正在尝试做的事情相比，是否有足够大的性能影响……制作一个通用/抽象的弹出窗口，并将元素/数据推送到它作为用户需求？

谢谢!

Answer 1

我应该使用 jQuery 和 jQuery UI 来做到这一点。 jQuery UI 有一个非常好的弹出功能，称为对话框。 ( http://jqueryui.com/demos/dialog/ )

您将在此处看到重建您的情况的工作版本。 ( http://jsfiddle.net/7GVmz/ )

您可以添加很多选项，例如按钮、打开和关闭时的回调。您可以在 jqueryui 网站 ( http://jqueryui.com/demos/dialog/#option-disabled ) 上的文档中阅读所有内容

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 库很重要。