modal appears when entering the page instead of waiting to be clicked

Asked

Viewed 196 times

-1

I don’t have much experience in javascript, could help me to stop the modal from appearing when entering the page?

I want the modal to appear only when there is a click on the link...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modal -  Vídeo Aula</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
// JavaScript Document
//On load page, init the timer which check if the there are anchor changes each 300 ms
$(document).ready(function(){
    setInterval("checkAnchor()", 300);
});
var currentAnchor = null;
//Function which chek if there are anchor changes, if there are, sends the ajax petition
function checkAnchor(){
    //Check if it has changes
    if(currentAnchor != document.location.hash){
        currentAnchor = document.location.hash;
        //if there is not anchor, the loads the default section
        if(!currentAnchor){
            query = "home";
        }else{
            //Creates the  string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
            var splits = currentAnchor.substring(1).split('&');
            //Get the section
            var section = splits[0];
            delete splits[0];
            //Create the params string
            var params = splits.join('&');
            var query = section /*+ params*/;

        }
        $.post( "pagina.php", { url: query }).done(function( data ) {
            $('.modal-box-conteudo').html(data);
         });

        //return query;
    }
}

</script>
<script type="text/javascript">
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {

    var pluses = /\+/g;

    function encode(s) {
        return config.raw ? s : encodeURIComponent(s);
    }

    function decode(s) {
        return config.raw ? s : decodeURIComponent(s);
    }

    function stringifyCookieValue(value) {
        return encode(config.json ? JSON.stringify(value) : String(value));
    }

    function parseCookieValue(s) {
        if (s.indexOf('"') === 0) {
            // This is a quoted cookie as according to RFC2068, unescape...
            s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
        }

        try {
            // Replace server-side written pluses with spaces.
            // If we can't decode the cookie, ignore it, it's unusable.
            // If we can't parse the cookie, ignore it, it's unusable.
            s = decodeURIComponent(s.replace(pluses, ' '));
            return config.json ? JSON.parse(s) : s;
        } catch(e) {}
    }

    function read(s, converter) {
        var value = config.raw ? s : parseCookieValue(s);
        return $.isFunction(converter) ? converter(value) : value;
    }

    var config = $.cookie = function (key, value, options) {

        // Write

        if (value !== undefined && !$.isFunction(value)) {
            options = $.extend({}, config.defaults, options);

            if (typeof options.expires === 'number') {
                var days = options.expires, t = options.expires = new Date();
                t.setTime(+t + days * 864e+5);
            }

            return (document.cookie = [
                encode(key), '=', stringifyCookieValue(value),
                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                options.path    ? '; path=' + options.path : '',
                options.domain  ? '; domain=' + options.domain : '',
                options.secure  ? '; secure' : ''
            ].join(''));
        }

        // Read

        var result = key ? undefined : {};

        // To prevent the for loop in the first place assign an empty array
        // in case there are no cookies at all. Also prevents odd result when
        // calling $.cookie().
        var cookies = document.cookie ? document.cookie.split('; ') : [];

        for (var i = 0, l = cookies.length; i < l; i++) {
            var parts = cookies[i].split('=');
            var name = decode(parts.shift());
            var cookie = parts.join('=');

            if (key && key === name) {
                // If second argument (value) is a function it's a converter...
                result = read(cookie, value);
                break;
            }

            // Prevent storing a cookie that we couldn't decode.
            if (!key && (cookie = read(cookie)) !== undefined) {
                result[name] = cookie;
            }
        }

        return result;
    };

    config.defaults = {};

    $.removeCookie = function (key, options) {
        if ($.cookie(key) === undefined) {
            return false;
        }

        // Must not alter options, thus extending a fresh object...
        $.cookie(key, '', $.extend({}, options, { expires: -1 }));
        return !$.cookie(key);
    };

}));
</script>
<script type="text/javascript">
    $(document).ready(function(e) {

        if($.cookie('modal') !== undefined){

            $('#modal').css('display','none');
        }

        $('.pagina').click(function(){
                $('#modal').fadeIn(1000);
        });

        $('.fechar, #modal').click(function(event){
            if(event.target !== this){
                return;
            }
            $('#modal').fadeOut(500);
            $.cookie('modal', '1', { expires: 1 });

        });
    });
</script>

<style rel="stylesheet" type="text/css">
#modal{ background:rgba(55,0,99, 0.5); width:100%; height:100%; position:fixed; left:0; top:0; } 
.modal-box{ background:#000; width:60%; height:300px; position:absolute; left:50%; top:50%; margin-left:-30%; margin-top:-150px;
border-radius: 10px 10px 40px 40px;
border:5px solid #442F46;
color:#dddddd;
}
.fechar{background:#442F46; padding:5px 10px; border:1px solid #000; position:absolute; right:3px; top:3px; border-radius:7px; color:#fff; cursor:pointer;}
.fechar:hover{background:#644767; color:#fff; border-color:#000;}
</style>
</head>



<body>
    <h1>Conteudo Vídeo Aula  -  Modal</h1>
    <a href="#pagina1" class="pagina">Página 1 - </a>

    <div id="modal">
        <div class="modal-box">
            <div class="modal-box-contekdo">

 <center>
 <big>Como Funciona?</big> <br/>
 <iframe frameborder='no' scrolling='no' src='https://wwwmmmwwwmmmwwwmmmwwwmmmwwwmmmwwwmmmw.blogspot.com.br' width='470' height='200'></iframe><br/>
  <a href="http://uvadownloads.blogspot.com/" title="UVA DOWNLOADS"><img src="https://1.bp.blogspot.com/-NzNqIkFWXoQ/WTC1LFU2nvI/AAAAAAAAAhQ/pg_t0zfiBPQiosgM-jmvDX9AH38zueNeACK4B/s1600/banner-468x60.gif" alt="uva downloads"/></a> 

 </center>


 </div>
            <div class="fechar">X</div>
        </div>
    </div>

</body>
</html>
javascript

  • Put <div id="modal" style="display:None">, I believe it will work.

  • our do not believe it was such a simple thing this kkkk vlw helped much

  • I’m glad it worked out! It was simple yes. Without the display:One, there would be nothing to hide it when you load the screen.

2 answers

0


Put it like this: <div id="modal" style="display:none">. So the modal will not be displayed when the page loads and will be triggered only when there is the click on the button.

0

One way to do this is to load the page with the attribute visibility of modal in CSS defined as hidden:

.modal-box{
    visibility: hidden;
}

And change this property later as a result of clicking:

$("#1").click(function() {
    $(".modal-box").css("visibility", "visible");
});

Following example below, based on your code (click "run"):

$("#1").click(function() {
    $(".modal-box").css("visibility", "visible");
});

$("#2").click(function() {
    $(".modal-box").css("visibility", "hidden");
});
.modal-box{
background:#000;
width:60%;
height:120px;
position:absolute;
left:50%; top:50%;
margin-left:-30%;
margin-top:-55px;
border-radius: 10px 10px 40px 40px;
border:5px solid #442F46;
color:#dddddd;
visibility: hidden;
}
.fechar{
background:#442F46;
padding:5px 10px;
border:1px solid #000;
position:absolute;
right:3px; top:3px;
border-radius:7px;
color:#fff;
cursor:pointer;}
.fechar:hover{background:#644767;
color:#fff;
border-color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modal - Vídeo Aula</title>
</head>

<body>
<h1>Modal</h1>
<a href="#" id="1" class="pagina">Abrir Modal</a>
<div id="modal">
    <div class="modal-box">
        <div class="modal-box-conteudo">

            <center>
                <big>Modal</big>
                <br/>
                <iframe frameborder='no' scrolling='no' src='#' width='470' height='200'></iframe>
                <br/>
            </center>
        </div>
        <div class="fechar" id="2">X</div>
    </div>
</div>
</body>

</html>

  • @Lary I saw that it was already solved, but I thought it best to leave here by reference... :)

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.