简体   繁体   中英

create cookie on Modal Window

I want to build Modal Window with cookie to display only once . I follow this tutorial http://calebserna.com/bootstrap-modal-email-subscription-form/ but still not working ? can anyone tell me how to fix it ? thanks . here my website. http://cloudsblack.com/modalwindow.html

here my code .

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <div class="heading heading-v1 margin-bottom-10">
                                <h2><strong><span class="color-orange">Modal Window</strong></span></h2>
                            </div>
                          </div>
                          <div class="modal-body">

                            <a class="btn btn-link" data-dismiss="modal">Close</a>

                          </div>
                          <div class="modal-footer">
                          </div>
                        </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->

<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>

<script type="text/javascript">

 $(document).ready(function() {
     if ($.cookie(‘pop’) == null) {
         $(‘#myModal’).modal(‘show’);
         $.cookie(‘pop’, ’7′);
     }
 });

</script>

Hi I'm here to answer my own question , I found these code its work ! thanks .

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Subscription Form Demo</h4>

<p>This is Bootstrap Modal popup example.</p>
      </div>
      <div class="modal-body">

<!--End mc_embed_signup-->

   <!-- Begin MailChimp Signup Form -->
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
    <input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL"/>
    </div>
     </div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_9e279011b21a23e1aed5e4868_cca4394bc9" value=""/></div>
    <div class="form-group remove-bottom">
    <div class="col-sm-offset-2 col-sm-10">
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"/>
    </div>
  </div>
</form>

<!--End mc_embed_signup-->
      </div>
      <div class="modal-footer remove-top">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!--============================================================= MODAL WINDOW END=================================================================-->

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js'></script>

<script type="text/javascript">
$(document).ready(function(){
    $('.bs-docs-sidebar').affix({
        offset: {
          top: 10
        }
    })
    if ($.cookie('pop') == null) {
                $('#myModal').modal('show');
                $.cookie('pop', '7');
            }
});

$(function($) {
$('#deleteCookie').click(function() {
        $.cookie('pop', null);
        window.location.reload();
      });
 });

</script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM