CODEWITHSUNDEEP
jqueryshopify
user4376981
user4376981

Reputation:

How can i show pop up message when entered website?

I am working with shopify, this is the link of website, i am working. https://crap-3.myshopify.com/ ,

When we entered the website, in the index page, show some pop up message like "welcome to our website".

$('#myModal').on('shown.bs.modal', function () {
    $('#myInput').focus()
  })




<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

May i know, how can i do this, any idea?

Thanks in advance.

Upvotes: 1

Views: 4896

Answers (2)

Ataboy Josef
Ataboy Josef

Reputation: 2101

You can use $(document).ready... like:

$(document).ready(function() 
 {
    // executes when HTML-Document is loaded and DOM is ready
    alert("(document).ready was called - document is ready!");  
 });

OR

Giving a function to the onLoad property of body, which execute a JavaScript immediately after a page has been loaded:

<body onload="myFunction()">

The window.load however will wait for the page to be fully loaded, this includes inner frames, images etc.

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});

window.load is a built-in JavaScript method, it is known to have some quirks in old browsers (IE6, IE8, old FF and Opera versions) but will generally work in all of them.

window.load can be used in the body's onload event like this.

Do not confuse the load method of the window element with the jQuery AJAX's load method!!!

// This is the AJAX load
$("#MyDivID").load("content_page.txt");

Here is a sample worked for me:

html:

<html>
<head>
<title> Popup Box DIV </title>
</head>
<body>
<div id="popup_box">    <!-- OUR PopupBox DIV-->
    <h1>This IS A Cool PopUp</h1>
    <a id="popupBoxClose">Close</a>    
</div>
<div id="container"> <!-- Main Page -->
    <h1>sample</h1>
</div>
</body>
</html>

css:

<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box { 
    display:none; /* Hide the DIV */
    position:fixed;  
    _position:absolute; /* hack for internet explorer 6 */  
    height:300px;  
    width:600px;  
    background:#FFFFFF;  
    left: 300px;
    top: 150px;
    z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 15px;  

    /* additional features, can be omitted */
    border:2px solid #ff0000;      
    padding:15px;  
    font-size:15px;  
    -moz-box-shadow: 0 0 5px #ff0000;
    -webkit-box-shadow: 0 0 5px #ff0000;
    box-shadow: 0 0 5px #ff0000;

}

#container {
    background: #d2d2d2; /*Sample*/
    width:100%;
    height:100%;
}

a{  
cursor: pointer;  
text-decoration:none;  
} 

/* This is for the positioning of the Close Link */
#popupBoxClose {
    font-size:20px;  
    line-height:15px;  
    right:5px;  
    top:5px;  
    position:absolute;  
    color:#6fa5e2;  
    font-weight:500;      
}
</style>

js:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready( function() {

        // When site loaded, load the Popupbox First
        loadPopupBox();

        $('#popupBoxClose').click( function() {            
            unloadPopupBox();
        });

        $('#container').click( function() {
            unloadPopupBox();
        });

        function unloadPopupBox() {    // TO Unload the Popupbox
            $('#popup_box').fadeOut("slow");
            $("#container").css({ // this is just for style        
                "opacity": "1"  
            }); 
        }    

        function loadPopupBox() {    // To Load the Popupbox
            $('#popup_box').fadeIn("slow");
            $("#container").css({ // this is just for style
                "opacity": "0.3"  
            });         
        }        
    });
</script>

Upvotes: 0

Hirav Sampat
Hirav Sampat

Reputation: 196

$(document).ready(function (){
   $('#myModal').modal('show')
});

HTML

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Welcome Message</p>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Upvotes: 1

Related Questions