Popup with disable background when page loads

HTML & CSS
1

hi there i just want to disable the background page when popup loads till now i have made the background dark and fixed but if i click anywhere outside, the popup goes .i want to only get disappear when user submits YES button please help here’s the code

<!DOCTYPE html>

    <html>
	<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="images/mobile-logo.png" rel="icon" type="image/x-icon" />
		<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/mystyle.css">
	<script>
    $(document).ready(function() {
    var id = '#dialog';
      //Get the screen height and width
        var maskHeight = $(document).height();
      var maskWidth = $(window).width();
     //Set heigth and width to mask to fill up the whole screen
     $('#mask').css({'width':maskWidth,'height':maskHeight});
     //transition effect
     $('#mask').fadeIn(500);
      $('#mask').fadeTo("slow",0.9); 
          //Get the window height and width
       var winH = $(window).height();
      var winW = $(window).width();
     //Set the popup window to center
          $(id).css('top',  winH/2-$(id).height()/2);
         $(id).css('left', winW/2-$(id).width()/2);
         //transition effect
         $(id).fadeIn(2000);  
       //if mask is clicked
    $('#mask').click(function () {
     $(this).hide();
      $('.window').hide();
      });
     });	
    </script>
	   <script>
	  var mywindow;
	function close() {
    myWindow.close();
}
	</script>

	
	</head>
	<body><br><br><br>
	<div class="row">
	<div id="fix">
	<div class="col-md-12 col-sm-12 col-xs-12">
	<div id="boxes">
  <div id="dialog" class="window">
  <img src="images/popup.jpg" class="img-responsive" width="100%" height="auto"></img><br>
  <div class="col-md-12 col-sm-12 col-xs-12">
  <button type="button" class="btn btn-danger" id="butt"><a href="reg1.php">YES</a></button>
  <button type="button" class="btn btn-danger" id="butt"><a href="index.php">NO</a></button>
  </div>                       
  </div>
  <div id="mask"></div>
</div>
</div>
</div>
</div>

	</body>
	</html>
2

Hi,

This is really a question for the js forum but I;ll try to answer anyway.

If you want the button to be the trigger for closing the mask then you need to change this section.

 $('#mask').click(function () {
     $(this).hide();
      $('.window').hide();
      });
     });

That is saying when you click the mask then hide the mask and .window.

If you want only the button to action the closing then change that code to target the button.

e.g.

  $('.btn-yes').click(function () {
      $('#mask').hide();
      $('.window').hide();
    });
  });

Then add the ‘btn-yes’ class to the button.

<button type="button" class="btn btn-danger btn-yes" id="butt"> yes </button>

Note that you cannot nest anchors inside a button. Either its a button (form control) or its an anchor with a destination. You can style it how you like but you can’t have an anchor inside a button.

Also note that ids are unique so you can’t have 2 ids that are the same as you have done with your buttons.

I amk also assuming that you have layered the css correctly as you didn’t show css files and that your mask is under your dialogue and not on top of it.

For more support you would better of setting up a working example online (or on codepen) so that we can see what you are doing in full.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.