Display Div in JQuery/Javascript

Question

Does anyone have an idea how to display my Div as transparent in JQuery with a function test () in javascript? thanks in advance.

function test() {
     document.getElementById("transparent").onclick; //ERROR
    }

    <head>
    <meta charset="utf-8">
    <title>Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    
    <body>
    <div data-role="page" id="page">
    
    <div data-role="content">
    <a href="#transparent" data-rel="popup" data-position-to="window" data-transition="pop" data-role="button">IMAGE</a>
    <a onClick="test()" data-role="button">test</a>  
    </div>
     
    <div id="transparent" data-role="popup" data-theme="none" data-shadow="false">
    <img src="a.png" class="popphoto" alt="Teste" width="300" height="300">
    </div>
    </div> 
    </body>

`document.getElementById("transparent").onclick;` ...what are you actually trying to do here? Are you trying to trigger a click event on this element? If so then you need to write... `document.getElementById("transparent").click()` See https://stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click — ADyson, Jun 18 '19 at 13:08

Sparkm4n · Answer 1 · 2019-06-18T13:56:05.433

the approach above is good. But to be more exact, the quick and dirty solution in JQuery would be this

$("#exec").on("click", function() {
           $("#transparent").css("opacity", "0.5"); 
    });

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    
    <body>
    <div data-role="page" id="page">
    
    <div data-role="content">
    <a href="#transparent" data-rel="popup" data-position-to="window" data-transition="pop" data-role="button">IMAGE</a>
    <a id="exec" data-role="button">test</a>  
    </div>
    
    <div id="transparent" data-role="popup" data-theme="none" data-shadow="false">
    <img src="a.png" class="popphoto" alt="Teste" width="300" height="300">
    </div>
    </div> 
    </body>
 </html>

after you click on the hyperlink, it sets straight the css of your div

score 0 · Answer 2 · edited Jun 18 '19 at 13:34

Try to bind the on click event on that link like this:

$("#myButton").on("click", function() {
            //do what you want with the button
            //if you want to make your div transparent, do it like this:
            $(this).addClass("transparentCSSClass"); 
       });

        <head>
        <meta charset="utf-8">
        <title>Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        </head>
        
        <body>
        <div data-role="page" id="page">
        
        <div data-role="content">
        <a href="#transparent" data-rel="popup" data-position-to="window" data-transition="pop" data-role="button">IMAGE</a>
        <a id="myButton" data-role="button">test</a>  
        </div>
        
        <div id="transparent" data-role="popup" data-theme="none" data-shadow="false">
        <img src="a.png" class="popphoto" alt="Teste" width="300" height="300">
        </div>
        </div> 
        </body>

Thank for you help, but just $("#transparent").popup("open"); it's OK Thank All — DarkMickael, Jun 18 '19 at 14:59

Display Div in JQuery/Javascript

2 Answers2