if else if statement on mousedown event

前端 未结 1 1602
南方客
南方客 2021-01-29 04:19

My goal is to have a different dialog box appear for each item clicked. I currently have one setup and figured I can just add an if statement. If mousedown on div_a, dialog_a, e

1条回答
  •  猫巷女王i
    2021-01-29 04:51

    Since you are new to coding, I suggest using the jQuery team's jQueryUI library -- which includes a .dialog() capability (they call it a "widget"). Here's how it works:

    (1) Include both jQuery and the jQueryUI libraries in your tags. Note that you must also include an appropriate CSS theme library for jQueryUI (or the dialogs will be invisible):

        
        
        
    

    (2) Create an empty div in your HTML, and initialize it as a dialog:

    HTML:

    jquery:

    $('#myDlg').dialog({
        autoOpen:false,
        modal:true,
        width: 500,
        height: 'auto'
    });
    

    (3) Then, when you are ready to display the dialog, insert new data into the myDlg div just before opening the dialog:

    $('#myDlg').html('
    This will display in the dialog
    '); $('#myDlg').dialog('open');

    The above allows you to change the content of the dialog and use the re-same dialog DIV each time.


    Here's what the working example would look like:

    jsFiddle Demo

    HTML:

    What is 2 + 2?
    4
    What is the 12th Imam?
    The totally wacky reason why Iran wants a nuclear bomb.

    jQuery:

    var que,ans;
    
    $('#myDlg').dialog({
        autoOpen:false,
        modal:true,
        width: 500,
        height: 'auto',
        buttons: {
            "See Answer": function(){
                $('#myDlg').html(ans);
                $('.ui-dialog-buttonset').next('button').hide();
            },
            "Close": function(){
                $('#myDlg').html('').dialog('close');
            }
        }
    });
    
    $('.allques').click(function(){
        que = $(this).find('.question').html();
        ans = $(this).find('.answer').html();
        $('#myDlg').html(que).dialog('open');
    });
    

    Resources:

    How to use Plugins for PopUp

    http://jqueryui.com/dialog/

    http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

    jQuery UI Dialog Box - does not open after being closed

    Dynamically changing jQueryUI dialog buttons

    jQuery UI dialog - problem with event on close

    0 讨论(0)
提交回复
热议问题