Question

我有一个confirm() JS代码，它工作得很好。基本上它是一个小功能，根据我发送的值（1或2）显示文本消息，按ok按钮将它们转到pdf文件。但是，当我在firefox中使用它时，它会显示＆＃34;阻止此页面显示其他内容＆＃34;对话框，我无法格式化其中的文本。

我正在寻找有关如何使用lightbox / modal转换它的指导。我的代码：

    <script language="javascript">
function confdl(distext,fname) 
{
    if (distext == "1")
    {
    var answer = confirm("Message 1 goes here.")
    }
    else
    {
    var answer = confirm("Message 2 goes here.")        
    }
    if (answer){
        window.location = ("/path/to/pdf/file/"+fname);
    }
    else{

    }
}
</script>

<a  href="javascript:confdl('1','file1.pdf');">PDF 1</a>
<a  href="javascript:confdl('2','file2.pdf');">PDF 2</a>

Answer 1

使用confirm没有任何问题，但是，在Google Chrome浏览器中多次显示时，它会显示一个复选框，让用户阻止警报弹出。这是Chrome的一项功能，可以防止不必要的弹出窗口出现烦人甚至恶意的网站。

您应该可以在方案中使用确认，但是您无法从Chrome弹出框中删除该复选框。

如果您正在寻找一种更现代化的解决方案，并且可以完全控制消息显示，那么您应该使用模态对话框。它看起来更好。既然是您自己的HTML，您可以使用CSS以任何方式设置它。

如果您想加快速度，可以使用许多库。举个例子，看看这个库如何用可自定义的模态替换默认的javascript弹出框：https://limonte.github.io/sweetalert2/

Answer 2

我想我明白了：）

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

     <script language="javascript" type="text/javascript">
         var linkno;

         function setLink(ind,msgtype) {
             linkno = ind;
		 	var div = document.getElementById('modalMsg');
		 	if (msgtype == "1")
		 		{
		 		div.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed lectus viverra, posuere mauris vel, faucibus massa. Fusce dui elit, ultricies quis aliquam et, pulvinar dictum ipsum. Etiam molestie arcu nec ipsum condimentum dignissim. Suspendisse et tempor orci, id accumsan mi. Pellentesque pellentesque ante vitae tortor vestibulum fringilla. Duis aliquam vel elit at molestie. Etiam vehicula libero id quam facilisis dictum. Pellentesque ultrices justo at feugiat luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent at dolor risus. Suspendisse sollicitudin vel purus ut ultrices. Cras libero est, lacinia et convallis vel, scelerisque quis lacus. Etiam condimentum orci sed urna finibus aliquet.';
				}
				else
				{
		 		div.innerHTML = 'Aliquam ut magna id est ornare imperdiet pellentesque tempus nisl. Fusce congue, turpis eu consequat pulvinar, massa tortor laoreet elit, nec dignissim felis neque non mauris. Aliquam non aliquet orci. Vivamus blandit at leo quis fringilla. Praesent sed est aliquet, porttitor nulla nec, finibus leo. Duis pellentesque id elit et porta. Nunc ullamcorper eget odio vitae accumsan. Quisque fermentum urna et nisl aliquet venenatis. Curabitur nec dignissim turpis. Nam dapibus tincidunt tincidunt. Ut vulputate ornare dictum. Donec ligula lectus, vestibulum at tellus ut, laoreet sagittis nunc. Sed malesuada aliquam lacus, eu suscipit justo dignissim luctus. Nullam eget mattis dolor. Ut ut ornare sem. ';
					
				}
		 }
         // modal box related functions
         $(document).ready(function() {
             var triggers = $(".modalInput").overlay({

                 // some mask tweaks suitable for modal dialogs
                 mask: {
                     color: '#ebecff',
                     loadSpeed: 200,
                     opacity: 0.9
                 },

                 closeOnClick: false
             });

             $("#btnContinue").click(function(e) {
                 // close the overlay
                 window.location = triggers.eq(linkno).overlay().getTrigger().attr("href");
             });

         });

    .modal {
        background-color:#e9e9e9;
        display:none;
        width:550px;
        padding:15px;
        text-align:left;
        border:1px solid #999999;
        opacity:0.8;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        -moz-box-shadow: 0 0 50px #ccc;
        -webkit-box-shadow: 0 0 50px #ccc;
        margin:auto auto auto auto;
    }

    .modal #modalTitle {
        margin:20px 0 0 0;
        padding:10px 0 10px 0;
        font-family:Arial;
        font-weight:bold;
        font-size:14px;
    }
    
    .modal #modalMsg 
    {
        border:1px solid #CCCCCC;
        background-color:#FFFFFF;
        color:#333333;
        padding:10px 10px 10px 10px;
    }
	.buttonlinks a
	{
		padding:4px;
		margin:4px;
		background:#f3f3f3;
		border:1px solid #cecece;
	}

    <div id="extlink" class="modal" style="display: none;">
        <a class="close" style="cursor:pointer;float: right; margin: 5px 0pt 0pt;" class="close">Close</a>
        <div id="modalTitle">Disclaimer:</div>
    
        <div id="modalMsg"></div>
    
        <!-- yes/no buttons -->
        <div style="float: right; margin: 20px 0pt 0pt;">
            <a id="btnContinue">Continue</a>
            <a class="close">Close</a>
        </div>
    </div>
	<div class="buttonlinks">    
    	<a href="http://www.pic.cx/img97/ijtasctqvznzrgoidrxr.jpg" class='modalInput' rel='#extlink' onclick='setLink(0,1)' target="_blank">Site 1</a>
    	<a href="http://www.w3schools.com/images/colorpicker.png" class='modalInput' rel='#extlink' onclick='setLink(0,2)' target="_blank">Site 2</a>
	</div>

将js comfirm框转换为灯箱

2 个答案: