CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mstef
mstef

Reputation: 1194

Many different popups needed; Is it better to use one abstracted popup to handle every scenario

I have 3 different types of modal windows to handle different events. They popup to handle either:

1) Warnings, i.e. "hey, if you leave the page you will lose your work" kind of messages.

2) Dynamic data from a form the user previously filled out, i.e. "you are about to create a page with DataX: Data X, DataY: DataY, Date: March 28, 2012.

3) Form for the user to fill out.

I was originally trying to handle all 3 of the above scenarios with one set of html/css/javascript, just passing in data and modifying divs depending on situation. As I have expanded things, i'm noticing things being harder to maintain cleanly without being sloppy about it. I have a few questions which i'll list after I walk through how things are now.

Simplified HTML for modal popups:

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

Right now this is located in a separate file with it's css and javascript and is loaded when the page is loaded.

In the main file I am changing the popup depending on what triggered the popup, just using jquery as such:

$('.modal-message').html('New Message');
$('.modal-subhead #header').text('New header');

The dynamic data is filled in similarly after first making the ajax request to get the data.

As I said, as things grow, i'm having to change a lot of this, and it's starting to feel sloppy. Especially as i'm having to make pixel perfect changes to the css for individual elements. Would it be best to have 3 completely separate sets of html to handle these? Where is the best place for this to live, is the separate file approach?

Is it better to keep adding separate elements as I need specific ones for certain instances, like so:

    <div class="modal-input-specific-thing">
        <div class="modal-label"></div>
        <div id="modal-input"></div>
        <div id="modal-input-2"></div>
    </div>

Or to use jquery to change the structure of the html on the fly?

var new_input = 'modal-input' + count; $('#modal-input').attr('id', new_input);

Is there a better method for pushing only the elements needed to a popup like this?

If I had 10-12 scenarios, which is possible as I keep expanding this. Is there a big enough performance hit to parsing 12 different sets of html/css every time page is loaded vs doing what i'm trying to do now...Making a generic/abstracted popup window, and push elements/data to it as the user needs?

Thanks!

Upvotes: 2

Views: 784

Answers (2)

Desmond Thompson
Desmond Thompson

Reputation: 1

I use SweetAlert for all my JavaScript alerts, it's a Better JavaScript Popup Box than the default and is really simple to use.

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>

A full tutorial is here - https://kodesmart.com/kode/javascript-replacement-alert-box

Upvotes: 0

S.Visser
S.Visser

Reputation: 4725

I should do this with jQuery and jQuery UI. The jQuery UI has a real nice popup function called dialog. ( http://jqueryui.com/demos/dialog/ )

A working version that reconstruct your situation you will see here. ( http://jsfiddle.net/7GVmz/ )

There are a lot of options you can add so as buttons, callbacks on opening and closing. You can read all of it in the documentation on the jqueryui website ( 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();
});​

Note

Its important that you load the jquery library and the jquery ui library.

​

Upvotes: 2

Related Questions