如何在弹出窗口中插入关闭按钮

How do I insert a close button inside my popup

本文关键字：插入 关闭按钮 窗口      更新时间：2024-05-19

我正在使用b.popup生成一个弹出窗口，我想在弹出窗口中包含一个关闭按钮"x"，但它不起作用。

我使用它如下：我没有安装jquery，因此我必须使用以下脚本头

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.easing.1.3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script src="jquery.bpopup-x.x.x.min.js"></script>
<script>

这是主脚本：

(function($) 
{
    $(function() 
    {
        /*Popup for Details Button*/
        $('#btndetails').bind('click', function(e)
        {
            // Prevents the default action to be triggered. 
                e.preventDefault();
        $("#element_to_pop_up").html("Some text");
                $('#element_to_pop_up').bPopup();
        }
 });
})(jQuery);

这是html按钮：

<input type="button" value="Details" id="btndetails" />
<div id="element_to_pop_up">
</div>

这就是CSS：

#element_to_pop_up
{ 
   background-color:#fff;
   border-radius:15px;
   color:#000;
   display:none; 
   padding:20px;
   min-width:400px;
   min-height: 180px;
}

我目前得到一个弹出窗口，为了关闭弹出窗口，我需要点击弹出窗口之外的。如何使用关闭按钮工作？请帮帮我。

您正在用Jquery覆盖html，因此，关闭按钮的span类将被删除。

http://jsfiddle.net/o9qoma1b/3/

看看这把小提琴，我已经修正了你的密码。希望它能帮助你

css：

    #element_to_pop_up
    { 
       background-color:#fff;
       border-radius:15px;
       color:#000;
       display:none; 
       padding:20px;
       min-width:400px;
       min-height: 180px;
    }
    span.button.b-close {
    position: absolute;
    top: 5px;
    right: 8px;
    cursor:pointer;
    }

HTML:

<input type="button" value="Details" id="btndetails" />
<div id="element_to_pop_up">
  <span class="button b-close"><span>X</span></span>
</div>

JS:

(function($) 
    {
               /*Popup for Details Button*/
            $('#btndetails').bind('click', function(e)
            {
                // Prevents the default action to be triggered. 
                    e.preventDefault();               
                    $('#element_to_pop_up').bPopup();
                    var html = $("#element_to_pop_up").html();
                    $("#element_to_pop_up").html(html+ "Some text");
            });  
    })(jQuery);

将其添加到HTML中，并在可能的情况下包含最新的JQuery。关闭

<a href="#" data-rel="back" data-role="button" data-theme="a" id="close-sub-cancel" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

试试这样的东西。

function closeMsg()
	{
		$("msgBox").fadeOut();
	}
<div id="msgBox">
	<a href="javascript:closeMsg();" class="btn btn-success">No Thanks</a>
</div>

相关文章：