if else if statement on mousedown event

前端未结

关注

 1  1601

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 <head></head> tags. Note that you must also include an appropriate CSS theme library for jQueryUI (or the dialogs will be invisible):

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

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

HTML:

<div id="myDlg"></div>

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('<div>This will display in the dialog</div>');
$('#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:

<div id="myDlg"></div>
<div id="questiona" class="allques">
    <div class="question">What is 2 + 2?</div>
    <div class="answer">4</div>
</div>
<div id="questionb" class="allques">
    <div class="question">What is the 12th Imam?</div>
    <div class="answer">The totally wacky reason why Iran wants a nuclear bomb.</div>
</div>

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)