Good day! Help, please, modify the modal window script. It is necessary to make so that by default, i.e. when the page was opened, the modal window was already open, and the window open button was inaccessible. The window is closed, the opening button appears. Click on the button, the window opens, and the button becomes unavailable. Need such logic. Thank you very much for the help!

(function() { $(function() { // ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΎΠΊΠ½ΠΎ $('button').click(function(evt) { evt.stopPropagation(); $('.message').addClass('active'); }); // Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΎΠΊΠ½ΠΎ $('.message').click(function(evt) { evt.stopPropagation(); }); $(document).add('.okay').click(function() { $('.message').removeClass('active'); }); }); }).call(this); 
 .click { display: block; height: 80px; width: 300px; position: absolute; background: #260016; } .message { position: absolute; top: calc(50% - 140px); left: calc(50% - 300px); width: 600px; height: 280px; z-index: 1000; background: #fff; color: button; padding: 60px; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 6px; -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .message.active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .okay { display: block; height: 80px; width: 300px; background: #e68a6c; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="click">ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ</button> <div class="message">Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ <button class="okay">Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ</button> </div>

    2 answers 2

    To show when loading, you just need to immediately call the show handler. And also, you need to add in the necessary places a function call that will hide or show the main button, for example:

     $(function() { // Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΎΠΊΠ½ΠΎ $('.message').click(function(evt) { evt.stopPropagation(); }); $(document).add('.okay').click(function() { $('.click').show(); // ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ $('.message').removeClass('active'); }); // ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΎΠΊΠ½ΠΎ $('.click').click(function(evt) { evt.stopPropagation(); $(this).hide(); //скрываСм ΠΊΠ½ΠΎΠΏΠΊΡƒ $('.message').addClass('active'); }).click(); }); 
     .click { display: block; height: 80px; width: 300px; position: absolute; background: #260016; } .message { position: absolute; top: calc(50% - 140px); left: calc(50% - 300px); width: 600px; height: 280px; z-index: 1000; background: #fff; color: button; padding: 60px; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 6px; -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .message.active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .okay { display: block; height: 80px; width: 300px; background: #e68a6c; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="click">ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ</button> <div class="message">Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ <button class="okay">Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ</button> </div>

      In fact, it is necessary to perform the actions that are performed to open a window by pressing when the page loads. And after opening the window, set the button blocking by adding the disabled attribute to it:

       (function() { $(function() { // ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы $('.message').addClass('active'); $('.click').attr('disabled', true); // ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΎΠΊΠ½ΠΎ ΠΏΠΎ Π½Π°ΠΆΠ°Ρ‚ΠΈΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ $('button').click(function(evt) { evt.stopPropagation(); $('.message').addClass('active'); $(this).attr('disabled', true); }); // Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΎΠΊΠ½ΠΎ $('.message').click(function(evt) { evt.stopPropagation(); }); $(document).add('.okay').click(function() { $('.message').removeClass('active'); $('button').attr('disabled', false); }); }); }).call(this); 
       .click { display: block; height: 80px; width: 300px; position: absolute; background: #260016; color: #fff; } .message { position: absolute; top: calc(50% - 140px); left: calc(50% - 300px); width: 600px; height: 280px; z-index: 1000; background: #fff; color: button; padding: 60px; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 6px; -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .message.active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .okay { display: block; height: 80px; width: 300px; background: #e68a6c; } button:disabled { background: silver; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="click">ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ</button> <div class="message">Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ <button class="okay">Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ</button> </div>