Back

jQuery Dialog Builder

jQuery Dialog Builder; quicly create dialog scripts for customer service reps with jQuery / Javascript and HTML.

We will turn this html list ....

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul id="dialogs">
<li>
    <!-- BRANCH ONE -->
    <div id="B1">
    <h3>Welcome to My First Modal</h3>
    <p>This is the content for the first modal.  You could ask a series of questions, and prompt your user to answer each.  Which in turn will open another dialogue.</p>
    <span data-button-text="Yes Branch (Branch #1)" data-button-function="AddFunctionCallhere" data-button-goto="Branch1_Yes">Yes</span>
    <span data-button-text="No Branch (Branch #2)" data-button-function=''  data-button-goto="Branch1_No">No</span>
    </div>
<!-- BRANCH ONE : #1 - YES -->     
<ul>
    <li>
    <div id="Branch1_Yes">
    <h3>Welcome to Branch #1 - Yes</h3>
    <p>But are you sure you answered yes?  Would you like to change your mind?</p>
    <span data-button-text="Yes Branch (Branch #1)" data-button-function="AddFunctionCallhere" data-button-goto="Branch1_Yes">Yes</span>
    <span data-button-text="No Branch (Branch #2)" data-button-function=''  data-button-goto="Branch1_No">No</span>
    </div>
</li>
</ul>
</li>
</ul>  
 

<ul id="dialogs">
<li>
    <!-- BRANCH ONE -->
    <div id="B1">
    <h3>Welcome to My First Modal</h3>
    <p>This is the content for the first modal.  You could ask a series of questions, and prompt your user to answer each.  Which in turn will open another dialogue.</p>
    <span data-button-text="Yes Branch (Branch #1)" data-button-function="AddFunctionCallhere" data-button-goto="Branch1_Yes">Yes</span>
    <span data-button-text="No Branch (Branch #2)" data-button-function=''  data-button-goto="Branch1_No">No</span>
    </div>
<!-- BRANCH ONE : #1 - YES -->      
<ul>
    <li>
    <div id="Branch1_Yes">
    <h3>Welcome to Branch #1 - Yes</h3>
    <p>But are you sure you answered yes?  Would you like to change your mind?</p>
    <span data-button-text="Yes Branch (Branch #1)" data-button-function="AddFunctionCallhere" data-button-goto="Branch1_Yes">Yes</span>
    <span data-button-text="No Branch (Branch #2)" data-button-function=''  data-button-goto="Branch1_No">No</span>
    </div>
</li>
</ul>
</li>
</ul>   

into this... (press button to begin)