Question

我有这样的代码bu ajax：

    $("document").ready(function (){ 

$(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});

     });

这是弹出框，我需要在打开这个弹出的页面打开时，打开这个弹出我使用这个代码

<a href="#" class="open_popup">Click here to open the popup</a>

如何在正文上打开弹出的onload标记。

Answer 1

一种方法是简单地触发链接上的点击事件。

$(window).load(function(){
    $(".open_popup").trigger("click");
});

Answer 2

如果您尝试加载内联内容（#subscribe_popup），则应使用html属性，而不是href。

来自Colorbox documentation：

$.colorbox({html:$('#subscribe_popup')})

正如另一个答案所示，请在$(window).load()

中使用它

$(window).load(function(){
    $.colorbox({html:$('#subscribe_popup')})
});

Answer 3

尝试：

function pop()
{
    $("document").ready(function (){ 

       // load the overlay

        if (document.cookie.indexOf('visited=true') == -1) {
            var fifteenDays = 0;
            var expires = new Date((new Date()).valueOf() + fifteenDays);
            document.cookie = "visited=true;expires=" + expires.toUTCString();
            $.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
        }

        $(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});

 });
}

On Body标签：

<body onload="javascript: pop()">

Answer 4

        <!--Jquery bootstrap Library-->
    <!--bootstrap  css file-->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

        <!--Window Control Code (You Are Perform)-->
        <script>
            $(window).load(function()
            {
                $('#myModal').modal('show');
            });
        </script>
        <!--Window Control Code (You Are Perform)-->
        <!--Pop Style CSS-->
        <style>
        .popupp h4{ 
        font-size:1.6em; 
        color:#0084C4; 
        font-family:"Times New Roman", Times, serif; 
        font-weight:bold; 
        padding:0em 0em 0.5em 0em; 
        text-align:center; 
        margin:0px;
        }
        .popupp h4 span{ 
        font-size:1.2em !important;
        }
        .queryform input[type=text],textarea,input[type=email],input[type=number]{border: 1px solid #CEC7C7; margin-bottom:1em; outline-color: #FF5B36; width:100%; font-size: 0.9em; padding:1em; -webkit-appearance: none; color: #B1B1B1;}
        .queryform input[type=submit]{border: 1px solid #CEC7C7; margin-bottom:1em; outline-color: #FF5B36; width:100%; font-size:1em; background:#000; padding:1em; -webkit-appearance: none; color: #fff;}
            .queryform textarea{ height:100px;}
            .queryform 
            { 
                padding: 0.5em 5em;
            }

            .close {
            font-size:4em;
            }
            .modal-header .close {
                margin-top: -31px;
            }
        </style>
        <!--Pop Style CSS-->
        <!--Define Pop Up-->
          <!-- Modal -->
          <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">    
              <!-- Define Pop Up content-->
              <div class="modal-content">
                <div class="modal-header popupp">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title"><span> Need Instant Services </span> ??? </h4>
                  <div class="queryform">
                    <form method="post" action="contact-post.php">
                        <input type="text" name="name" placeholder="Enter Your Name" required> 
                        <br />                  
                        <input type="number" name="mobile" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength = "10" minlength = "10" placeholder="Enter Your Mobile Number" required>
                        <br />                  
                        <input type="email" name="email" placeholder="Enter Your Email Address" required>
                        <br />
                        <textarea name="msg" placeholder="Enter Your Requirment" required></textarea>
                        <br />      
                        <p align="center"><input type="submit" value="Enquiry" name="enquiry_home"></p>
                    </form>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>      
            </div>
          </div>

打开页面时打开弹出框

4 个答案: