onload popup

piet bieruik · February 26, 2014

Hi guys,

Im using this script:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Naamloos document</title>
<style type="text/css">
body{background-color:#CCC;}
#element_to_pop_up { 
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none; 
    padding:20px;
    min-width:400px;
    min-height: 180px;
}
.b-close{
    cursor:pointer;
    position:absolute;
    right:10px;
    top:5px;
}
</style>
</head>

<body>
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
    <a class="b-close">x<a/>
    Content of popup
</div>
        
	 

<script type="text/javascript" src="javascript/Jquery.js"></script>
<script type="text/javascript" src="javascript/bpopup.js"></script>
<script>
		
		(function($) {

         // DOM Ready
        $(function() {

            // Binding a click event
            // From jQuery v.1.7.0 use .on() instead of .bind()
            $('#my-button').bind('click', function(e) {

                // Prevents the default action to be triggered. 
                e.preventDefault();

                // Triggering bPopup when click event is fired
                $('#element_to_pop_up').bPopup({
            speed: 650,
            transition: 'slideIn'
        });

            });

        });

    })(jQuery);
	
	 </script>
</body>
</html>

onclick the popup opens.

Now i want to open the popup when an if statement is TRUE in php.

how can i change this for the best?

i have little knowledge about jquery

thanks

.josh · February 27, 2014

you only want it to pop if an if statement in php is true? js cannot directly run php.

you're going to have to

a) determine whether true or false before the page load and output a js var to check

b) do an ajax call to run the php code and return a result.

piet bieruik · February 27, 2014

True, i changed to ajax.

Im making a login script.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Naamloos document</title>
<style type="text/css">
body{background-color:#CCC;}
#element_to_pop_up {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.b-close{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
</style>
</head>

<body>
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
<div id="content"></div>
</div>



<script type="text/javascript" src="javascript/Jquery.js"></script>
<script type="text/javascript" src="javascript/bpopup.js"></script>
<script>

(function($) {

// DOM Ready
$(function() {

// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {

// Prevents the default action to be triggered.
e.preventDefault();

// Triggering bPopup when click event is fired
// $('#element_to_pop_up').bPopup({
// speed: 650,
//transition: 'slideIn'

$('#element_to_pop_up').bPopup({
contentContainer:'#content',
speed: 650,
transition: 'slideIn',
loadUrl: 'action.php' //Uses jQuery.load()
});

});

});

})(jQuery);

</script>
</body>
</html>

I want to send the user name and password to the loaded page, the action.php(ajax call)
there i check if the user name and password is correct and give an message.

How can i do this ?

Sign In

onload popup

Recommended Posts

piet bieruik

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

piet bieruik

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information